Initial Data For D3 Tree Are Not Properly Visualize

I managed to use d3 to make a bottom up family tree, the adding, deletion works fine as it is, but when i try to load initial data that have nested children to be more than 2 or mo

Solution 1:

Okay, it seems that i just failed to initiate the id for each of the members, since the important part of generating the node is highly dependent on id(well u can change it to anything unique really).

node = node.data(tree.nodes(root), function(d) { return d.id; });   
link = link.data(tree.links(nodes), function(d) { return d.source.id + "-" + d.target.id; });

The initial data needed to load the visualization must have id as such:

{
           id:2,
           patient_name: "Adam Father",
            reference_id: "199210291",
            relationship: "",
            pc_id: "121292",
            consanguineous_marriage: false,
            children: [],
            problems: [{
              id: 0,
              name: "cleft lip",
              impact: "disease",
              remarks: "Need constant monitoring."
            },
            {
              id: 1,
              name: "cleft palate",
              impact: "carrier",
              remarks: "Need constant monitoring."
            }]
        },{
           id:3,
           patient_name: "Adam Mother",
            reference_id: "199210291",
            relationship: "",
            pc_id: "121292",
            consanguineous_marriage: false,
            children: [],
            problems: [{
              id: 0,
              name: "cleft lip",
              impact: "disease",
              remarks: "Need constant monitoring."
            },
            {
              id: 1,
              name: "cleft palate",
              impact: "carrier",
              remarks: "Need constant monitoring."
            }]
        }

Working jsfiddle