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 more than the root, visualization of said data breaks.

How do i get the initialize data to visualize given multiple nested children? What did i missed in getting it to work? How do i calculate and set the separation between nodes when it gets more than 3 levels?

I've done the enter,update and exit as it should i think, resulting it to works in adding,deleting. JSFiddle for only root data, with adding and deleting.

When i initiliaze the data with more than 1 children, the visualization started to breaks, instead of initially showing all the relationships it only shows one relationship. The fiddle of said problem. As such:

What i wanted to achieve when it initially load with nested children data are the visualization of the nested relationships, as situation above it should be:

The data:

{ patient_name: "Adam Farish", reference_id: "199210291", relationship: "", pc_id: "121292", consanguineous_marriage: false, children: [{ 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." }] },{ 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." }] } ], problems: [{ id: 0, name: "cleft lip", impact: "disease", remarks: "Need constant monitoring." }, { id: 1, name: "cleft palate", impact: "carrier", remarks: "Need constant monitoring." }] }

The code for the D3 Family Tree: