Tags
With tags option you can:
- Set specific template for tagged nodes
- Set a specific node menu
Set specific template for tagged nodes.
Code example:
FamilyTree.templates.myTemplate_female = Object.assign({}, FamilyTree.templates.tommy); FamilyTree.templates.myTemplate_female.node = '<rect x="0" y="0" height="{h}" width="{w}" stroke-width="1" fill="rgb(255, 202, 40)" stroke="#aeaeae" rx="7" ry="7"></rect>'; var family = new FamilyTree(document.getElementById("tree"), { tags: { Mom: { template: "myTemplate_female" } }, nodes: [ { id: 1, pids: [2], name: "Amber McKenzie", gender: "female", tags: ["Mom"] }, { id: 2, pids: [1], name: "Ava Field", gender: "male" }, ... });
Code example:
var family = new FamilyTree(document.getElementById("tree"), { tags:{ Mom: { nodeMenu: { details: { text: "Details" }, }, } }, nodes: [ { id: 1, pids: [2], name: "Amber McKenzie", gender: "female", tags: ["Mom"] }, { id: 2, pids: [1], name: "Ava Field", gender: "male" }, ... });
Set specific template for male or fimale nodes.
Code example:
FamilyTree.templates.myTemplate_female = Object.assign({}, FamilyTree.templates.tommy); FamilyTree.templates.myTemplate_female.node = '<rect x="0" y="0" height="{h}" width="{w}" stroke-width="1" fill="rgb(255, 202, 40)" stroke="#aeaeae" rx="7" ry="7"></rect>'; var family = new FamilyTree(document.getElementById("tree"), { tags: { female: { template: "myTemplate_female" } }, nodes: [ { id: 1, pids: [2], name: "Amber McKenzie", gender: "female" }, { id: 2, pids: [1], name: "Ava Field", gender: "male" }, ... });