d3.js Family chart

^ this is the goal to start enhancing the chart to take the birth/death/name data -- but to have it be more flexible to take it. Also cleaning up the data source.

I am trying to develop a d3.js family chart. I'm interested in trying to enhance the data structure of this chart, along with the addition and space/design for the labels -- if there is a way of giving the parts dynamic lengths to give them the space it needs.

I've made this jsfiddle http://jsfiddle.net/857edt69/30/

  // Create the node rectangles.   nodes.append("circle")     .attr("class", "node")     .attr("r", function(d, i) {       return smallRadius;     })     .style("fill", function(d, i) {        var userName = d.userName;       if (userName) {         userName.toLowerCase()       }        var id = d.id + "-" + userName; //small circles       return "url(#" + id + ")";     })     .attr("id", function(d) {       return d.id;     })     .attr("display", function(d) {       if (d.hidden) {         return "none"       } else {         return ""       };     })     .attr("cx", function(d) {       return d.x - (smallRadius / 2) + 10;     })     .attr("cy", function(d) {       return d.y - (smallRadius / 2) + 10;     });     // Create the node text label.   nodes.append("text")     .text(function(d) {       //return d.name;       return d.userName;     })     .attr("x", function(d) {       return d.x - (smallRadius / 2) + 10;     })     .attr("y", function(d) {       return d.y - (smallRadius / 2) - 20;     }); 

1 Answers

Answers 1

The canonical algorithm one would use for that type of family tree is known as the "sugiyama" layered graph layout. (you could also get something similar with a force layout, but getting the constraints right is quite tedious)

The Sugiyama requires traversing down the tree to measure widths and offsets, then back up the tree to reorder and place for minimal line crossover. It's not the most beginner friendly algorithm, but the easiest introduction I've found is here

I've personally had good success with the highly polished dagre lib for sugiyama calculations, and the d3 adaption in dagre-d3. both of these assume you have data model that's graph-like and compatible with graphlib, but you can easily convert your data structure to a graphlib and back(here's an example for cytoscape data structures)

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati