tree.nodeSizeはD3 v4の

Question

に私は座標を計算するためにd3.tree（）。​​nodeSize（）を使用するが、私はいとこの距離は、その倍のbrothers.seeの私は距離がしたい画像
で見ます一貫している。私はAPIで解決する方法を見ていない、それをどう対処するのですか？

var svg = d3.select("svg"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"), 
 
    g = svg.append("g").attr("transform", "translate(40,200)"); 
 

 
var tree = d3.tree() 
 
    .nodeSize([50,50]);//make node space 
 
var data={ 
 
    id:1, 
 
    children:[ 
 
    { 
 
     id:2, 
 
     children:[ 
 
     { 
 
      id:3 
 
     }, 
 
     { 
 
      id:4 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     id:5, 
 
     children:[ 
 
     {id:6}, 
 
     {id:7} 
 
     ] 
 
    } 
 
    ] 
 
}; 
 
var root=d3.hierarchy(data) 
 
tree(root) 
 
//console.log(root) 
 
var link = g.selectAll(".link") 
 
     .data(root.descendants().slice(1)) 
 
    .enter().append("path") 
 
     .attr("class", "link") 
 
     .attr("d", diagonal).style("fill","none").style("stroke-width",1).style("stroke","#000000"); 
 

 
    var node = g.selectAll(".node") 
 
     .data(root.descendants()) 
 
    .enter().append("g") 
 
     .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) 
 
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });// add node 
 

 
    node.append("circle") 
 
     .attr("r", 2.5); 
 

 
    node.append("text") 
 
     .attr("dy", 3) 
 
     .attr("x", function(d) { return d.children ? -8 : 8; }) 
 
     .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) 
 
     .text(function(d) { return d.id; }); 
 
function diagonal(d) { 
 
    return "M" + d.y + "," + d.x 
 
     + "L" + d.parent.y + "," + d.parent.x; 
 
}

<svg width="960" height="2400"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 1

最近、私はこの問題

var svg = d3.select("svg"), 
 
    width = +svg.attr("width"), 
 
    height = +svg.attr("height"), 
 
    g = svg.append("g").attr("transform", "translate(40,200)"); 
 

 
var tree = d3.tree() 
 
    .nodeSize([50,50])//make node space 
 
    .separation(function(a,b){ 
 
     return a.parrent==b.parrent?1:1 
 
    });// make separation accessor 1 
 
var data={ 
 
    id:1, 
 
    children:[ 
 
    { 
 
     id:2, 
 
     children:[ 
 
     { 
 
      id:3 
 
     }, 
 
     { 
 
      id:4 
 
     } 
 
     ] 
 
    }, 
 
    { 
 
     id:5, 
 
     children:[ 
 
     {id:6}, 
 
     {id:7} 
 
     ] 
 
    } 
 
    ] 
 
}; 
 
var root=d3.hierarchy(data) 
 
tree(root) 
 
//console.log(root) 
 
var link = g.selectAll(".link") 
 
     .data(root.descendants().slice(1)) 
 
    .enter().append("path") 
 
     .attr("class", "link") 
 
     .attr("d", diagonal).style("fill","none").style("stroke-width",1).style("stroke","#000000"); 
 

 
    var node = g.selectAll(".node") 
 
     .data(root.descendants()) 
 
    .enter().append("g") 
 
     .attr("class", function(d) { return "node" + (d.children ? " node--internal" : " node--leaf"); }) 
 
     .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });// add node 
 

 
    node.append("circle") 
 
     .attr("r", 2.5); 
 

 
    node.append("text") 
 
     .attr("dy", 3) 
 
     .attr("x", function(d) { return d.children ? -8 : 8; }) 
 
     .style("text-anchor", function(d) { return d.children ? "end" : "start"; }) 
 
     .text(function(d) { return d.id; }); 
 
function diagonal(d) { 
 
    return "M" + d.y + "," + d.x 
 
     + "L" + d.parent.y + "," + d.parent.x; 
 
}

<svg width="960" height="2400"></svg> 
 
<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

return a.parrent==b.parrent?1:1

は何もしません対処するtree.separationを参照してください。

return a.parrent==b.parrent?1:2またはreturn 1