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"