How do you create a family tree in d3.js?

by

My approach is as under:

Lets take the example you have illustrated in the attached figure:

Jenny Of Oldstones is also a the child of Aegon V but the difference between this child and other children of Aegon V is that in this case I am not drawing the link between it.

This is done by setting the node as no_parent: true in the node JSON
example:

//Here Q will not have a parent
 {
            name: "Q",
            id: 16,
            no_parent: true
 }

In the code check the _elbow function_ this does the job of not drawing the line between it and its parent:

if (d.target.no_parent) {
    return "M0,0L0,0";
}

Next scenario is the link going between Node Aerys II and Rahella this node has its set of children.

  • I have created a node between them which is marked as hidden: true,
  • I make the display:none for such node. It appears that the children are coming from the line between node Aerys II and Rahella

JSON Example: 

//this node will not be displayed
{ name: "",
    id: 2,
    no_parent: true,
    hidden: true,
    children: [....]

    }

In the code check the place where I make the rectangles, the code below hides the node:

    .attr("display", function (d) {
    if (d.hidden) {
        return "none"
    } else {
        return ""
    };
})

Full code is in here:
http://jsfiddle.net/cyril123/0vbtvoon/22/

In the example above, I have made the use of node names A/B/C… but you can change it as per you requirements. You will need to center the text.

I have added comments to the code to help you understand the flow.
Just in case you are not clear on any point please comment I ll be happy to clarify.

More Related Contents:

  1. d3.js spreading labels for pie charts
  2. Selecting null: what is the reason behind selectAll(null) in D3?
  3. How to load data from a CSV file in D3 v5
  4. Cannot use attr with an object in D3 v4
  5. Highlight selected node, its links, and its children in a D3 force directed graph
  6. How do I include newlines in labels in D3 charts?
  7. Retrieve DOM target from drag callback when `this` is not available
  8. Resize svg when window is resized in d3.js
  9. Invoke a callback at the end of a transition
  10. D3 force layout – linking nodes by name instead of index
  11. variable background colors in google line chart
  12. Is there a way to tell crossfilter to treat elements of array as separate records instead of treating whole array as single key?
  13. D3js – change Vertical bar chart to Horizontal bar chart
  14. In d3, how to get the interpolated line data from a SVG line?
  15. Creating and appending detached elements with d3.create
  16. Label outside arc (Pie chart) d3.js
  17. D3js take data from an array instead of a file
  18. Where is d3.svg.diagonal()?
  19. d3.js – v3 and v4 – Enter and Update differences
  20. Importing data from multiple csv files in D3
  21. D3 fill shape with image using pattern
  22. Remove x-axis label/text in chart.js
  23. Setting rounded corners for svg:image
  24. svg / d3.js rounded corners on one side of a rectangle
  25. Adding new nodes to Force-directed layout
  26. Dynamically resize the d3 tree layout based on number of childnodes
  27. Passing data from Django to D3
  28. draw text in d3 arc javascript
  29. Show values on top of bars in a barChart
  30. D3.js: Position tooltips using element position, not mouse position?

Leave a Comment