D3 树布局使用 NodeSize 分隔节点

现在我正在尝试分离我的矩形节点，因为它们重叠，如下图所示：

我看了一下，发现D3提供了一个nodeSize https://github.com/mbostock/d3/wiki/Tree-Layout#wiki-nodeSize and 分离 https://github.com/mbostock/d3/wiki/Tree-Layout#wiki-separation方法，但由于某种原因它不起作用。

我找到了这个博客文章 http://javaguirre.net/2013/01/30/fixing-nodes-overlapping-d3-tree/谈论这个问题但他说

节点中不存在 size 属性，因此它将是您想要控制节点大小的任何属性。

但显然有一个 nodeSize 方法，所以我觉得我只是错误地使用了该方法和/或博客文章已经过时了。我想将节点的形状调整为矩形的大小，并将它们均匀地间隔开，这样它们就不会彼此重叠。有谁知道如何正确使用这些方法？关于这些方法的文档没有很好地解释，并且没有产生任何差异。我也找不到很多例子，人们改变了树的节点大小或需要分离矩形对象（有一些关于圆形对象的例子，但我觉得这太不同了......）

这是相关代码。我会尝试准备一个JSFiddle。

var margin = {top: 20, right: 120, bottom: 20, left: 120},
    height = 960 - margin.right - margin.left,
    width = 800 - margin.top - margin.bottom,
    rectW = 70;
    rectH = 30;
    //bbox = NaN,
    maxTextLength = 0;

var i = 0,
    duration = 750,
    root;


//paths from each node drawn initially here
//changed to d.x, d.y
var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.x+rectW/2, d.y+rectH/2];
    //.projection(function(d) { return [d.x+bbox.getBBox().width/2, d.y+bbox.getBBox().height/2]; 
});

var tree = d3.layout.tree()
    .nodeSize([30,70])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); })
    .size([width, height]);

var svg = d3.select("body")
            .append("svg")
              .attr("height","100%").attr("width","100%")
              .call(d3.behavior.zoom().on("zoom", redraw))
              .append("g")
                .attr("transform", "translate(" + margin.top + "," + margin.left + ")");

更新 05/04/2018：据我了解，d3 已经发生了很大的变化（变得更好），变得更加模块化。对于那些正在寻找这个答案的人来说，这是使用更旧版本的 d3（特别是 v3）。

许多研究结果仍然适用于d3-hierarchy https://github.com/d3/d3-hierarchy/blob/master/src/cluster.js包下cluster.size() and cluster.nodeSize() https://github.com/d3/d3-hierarchy#cluster_size我计划可能更新我的示例以使用它。不过，为了历史参考，我不会触及底部。

这是一个 jsFiddle：http://jsfiddle.net/augburto/YMa2y/ http://jsfiddle.net/augburto/YMa2y/

编辑：更新示例并将其移至 Codepen。该示例仍然存在于 jsFiddle 上，但 Codepen 似乎有一个更好的编辑器，并且允许您轻松 fork。一旦我减少了其中的内容量，我还将尝试将示例直接添加到此答案中。

http://codepen.io/augbog/pen/LEXZKK http://codepen.io/augbog/pen/LEXZKK

更新这个答案。我和我的朋友聊过，我们查看了来源size and nodeSize

  tree.size = function(x) {
    if (!arguments.length) return nodeSize ? null : size;
    nodeSize = (size = x) == null;
    return tree;
  };

  tree.nodeSize = function(x) {
    if (!arguments.length) return nodeSize ? size : null;
    nodeSize = (size = x) != null;
    return tree;
  };

当您设置一个size对于树，您要设置固定大小，以便树必须符合该宽度和高度。当您设置一个nodeSize，树必须是动态的，因此它会重置树的大小。

当我指定size after nodeSize，我几乎超越了我想要的哈哈......

底线： 如果你想nodeSize为了工作，你不能有固定的树大小。它将把大小设置为null。不要声明size如果您要声明nodeSize.

编辑：实际上是 D3.js更新了文档 https://github.com/mbostock/d3/wiki/Tree-Layout#nodeSize。感谢这样做的人，因为现在更清楚了！

nodeSize属性与tree.size互斥；环境 tree.nodeSize 将 tree.size 设置为 null。

这就是我的树现在的样子。我还添加了缩放功能以及如何将文本在矩形内居中。