將D3樹節點位置綁定到X軸

Question

我正在玩從D3開始創建一個家族樹，我無法將我的圖形的節點分配到相應的出生年份。我將軸放置在樹形圖下方，但希望看到具有不同鏈接長度的節點。

WIP fiddle

JS：

var familyTree = 
    {'name':'Child', 'born':1990, 'parents': [ 
    {'name':'Father', 'born':1970, 'parents': [ 
     {'name':'GrandMother1', 'born':1950}, 
     {'name':'GrandFather1', 'born':1940}]}, 
    {'name':'Mother', 'born':1960, 'parents':[ 
     {'name':'GrandFather2', 'born':1930}, 
     {'name':'GrandMother2', 'born':1945}]} 
    ]}; 


var margin = {top:20, right:90, bottom:30, left:90}, 
    width = 900 - margin.left - margin.right, 
    height = 400 - margin.top - margin.bottom; 

var treemap = d3.tree() 
    .size([height,width]); 

var nodes = d3.hierarchy(familyTree, function(d){ 
    return d.parents; 
}); 

nodes = treemap(nodes); 

var svg = d3.select('body').append('svg') 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom), 
    g = svg.append('g') 
    .attr('transform','translate(' + margin.left + ',' + margin.top + ')'); 


var formatNumber = d3.format(''); 
var x = d3.scaleLinear() 
    .domain([2017,1900]) 
    .range([0,width]); 
var xAxis = d3.axisBottom(x) 
    .ticks(25) 
    .tickFormat(formatNumber); 
g.append('g') 
    .attr('transform','translate(0,' + height + ')') 
    .call(customXAxis); 
function customXAxis(g) { 
    g.call(xAxis); 
    g.select('.domain').remove(); 
}; 


var link = g.selectAll('.link') 
    .data(nodes.descendants().slice(1)) 
    .enter().append('path') 
    .attr('class','link') 
    .attr('d', function(d) { 
    return 'M' + d.y + ',' + d.x 
     + 'C' + (d.y + d.parent.y)/2 + ',' + d.x 
     + ' ' + (d.y + d.parent.y)/2 + ',' + d.parent.x 
     + ' ' + d.parent.y + ',' + 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(' + d.y + ',' + d.x + ')';}); 

node.append('circle') 
    .attr('r',10); 

node.append('text') 
    .attr('dy','.35em') 
    .attr('x',function(d){return d.parents ? -13 : 13;}) 
    .style('text-anchor',function(d){ 
    return d.parents ? 'end' : 'start';}) 
    .text(function(d){return d.data.name;}); 

有人能告訴我怎麼去節點X位置來表示出生年份？

Answer 1

我能夠通過調整鏈接和節點附加來使用天生屬性而不是y屬性來解決問題。 Working Fiddle

部更新：

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 + ')';});