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 placed underneath the tree map, but would like to see the nodes having different link lengths.

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

Can someone show me how to get the node X position to represent the birth year?

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

来源：https://stackoverflow.com/questions/43415062/binding-d3-tree-node-position-to-x-axis

标签

javascript

d3.js