tree.nodeSize在D3 V4

我用d3.tree（）。nodeSize（）来计算坐标，但是我看到表姐的距离两倍于图片
我想的距离brothers.see的是一致的。我没有看到如何解决在API中，如何处理它？ tree.nodeSize在D3 V4

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>

来源

2017-03-01 流年灬异彩

最近我看到tree.separation来处理这个问题

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>

来源

2017-03-10 06:12:00

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

没有做任何事情。

您应该使用return a.parrent==b.parrent?1:2或只是return 1

来源

2018-02-06 18:18:16

tree.nodeSize在D3 V4

回答

相关问题