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

在您的代码中，您需要在x元素上设置y和text，而不是在相应的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"; }); 和{{1}}。为了使其更复杂，每个矩形具有随机的宽度和高度，使得难以将其居中于文本上。

这是解决问题的一种方法：

{{1}}

更新了fiddle。