Skip to content Skip to sidebar Skip to footer

Binding D3 Tree Node Position To X Axis

I am playing with creating a family tree in D3 from scratch, and I am having trouble getting the nodes of my graph to be assigned to the corresponding birth year. I have the axis

Solution 1:

I was able to solve the issue by adjusting the link and node appends to use the born attribute rather than the y attribute. Working Fiddle

portions updated:

var link = g.selectAll('.link')
  .data(nodes.descendants().slice(1))
  .enter().append('path')
  .attr('class','link')
  .attr('d', function(d) {
    return'M' + x(d.data.born) + ',' + d.x
      + 'C' + (x(d.data.born) + x(d.parent.data.born)) / 2 + ',' + d.x
      + ' ' + (x(d.data.born) + x(d.parent.data.born)) / 2 + ',' + d.parent.x
      + ' ' + x(d.parent.data.born) + ',' + d.parent.x;
  });

var node = g.selectAll('.node')
  .data(nodes.descendants())
  .enter().append('g')
  .attr('class',function(d){
    return'node' +
      (d.parents ? ' node--internal' : ' node--leaf');})
  .attr('transform',function(d) {
    return'translate(' + x(d.data.born)  + ',' + d.x + ')';});

Post a Comment for "Binding D3 Tree Node Position To X Axis"