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