d3树节点位置

Question

如何定位尺寸可变的d3树形图的节点？

这是我到目前为止所能看到的，您可以看到位置已经偏离了

http://jsfiddle.net/cdad0jyz/1/

我尝试使用分离方法：

var tree = d3.layout.tree()
        .nodeSize([10,10])
         .separation(function(a, b) {
               var width = 200, // here should be a value calculated for each node
                   distance = width / 2 + 16; 
                   return distance;
           });

Answer 1

在代码中，您在text元素上设置了x和y ，但没有在相应的rects 。 更复杂的是，每个矩形的宽度和高度都是随机的，因此很难将其居中放置在文本上。

这是解决它的一种方法：

nodeEnter.append("rect")
    .attr("width",  genRand)  //rectW
    .attr("height", genRand) // rectH
    .attr("x", function(){
        return (rectW / 2) - (d3.select(this).attr('width') / 2);
    })
    .attr("y", function(){
        return (rectH / 2) - (d3.select(this).attr('height') / 2);
    })
    .attr("stroke", "black")
    .attr("stroke-width", 1)
    .style("fill", function (d) {
    return d._children ? "lightsteelblue" : "#fff";
});

更新小提琴 。