Tags

With tags option you can:

• Set specific template for tagged nodes
• Set specific CSS 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" }, 
        ...
    });
    

Set specific CSS for tagged nodes.

Code example:

 
    // JavaScript
    var family = new FamilyTree(document.getElementById("tree"), {
        nodes: [
            ...
            { id: 5, mid: 1, fid: 2, name: "Emma Stevens", gender: "female", tags: ["green"] }
        ...
    });

    // CSS
    svg.tommy .node.green.female rect{
      fill: #00D3A5;
    }
    

Set node menu items for tagged nodes. See Menus for more details.

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" }, 
        ...
    });