2018 年 5 月 4 日更新：据我所知，d3 已经发生了很大变化（变得更好），变得更加module化。对于那些正在寻找这个答案的人，这是使用旧版本的 d3（特别是 v3）。

很多研究结果仍然是相关的d3-hierarchy包下cluster.size()，并cluster.nodeSize()和我计划可能更新我的例子中使用的。不过，作为历史参考，我将底部保持不变。

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

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

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

更新这个答案。我跟我的朋友，我们看了源size和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为树设置 a 时，您正在设置一个固定大小，以便树必须符合该宽度和高度。当您设置 a 时nodeSize，树必须是动态的，因此它会重置树的大小。

当我size在之后指定时nodeSize，我几乎覆盖了我想要的东西哈哈...

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

编辑：D3.js 实际上更新了文档。感谢这样做的人，因为它现在更清晰了！

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

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

直到我自己进行了一些挖掘，我才完全理解已接受的答案，所以我想我也会分享我的发现......

如果您正在使用.size()并且您的节点重叠，请.nodeSize()改用

如已接受的答案中所述，.size()设置树的可用大小，因此根据表亲节点、第二个表亲等之间的间距，它们可能会被挤压在一起并重叠。使用.nodeSize()简单地说每个节点应该有这么多空间，所以它们永远不会重叠！

最终为我工作的代码是

var nodeWidth = 300;
var nodeHeight = 75;
var horizontalSeparationBetweenNodes = 16;
var verticalSeparationBetweenNodes = 128;

var tree = d3.layout.tree()
    .nodeSize([nodeWidth + horizontalSeparationBetweenNodes, nodeHeight + verticalSeparationBetweenNodes])
    .separation(function(a, b) {
        return a.parent == b.parent ? 1 : 1.25;
    });

没有horizontalSeparationBetweenNodes和verticalSeparationBetweenNodes节点边缘相互接触。我还添加了这个.separation()以减少表亲节点之间的空间量，因为我的节点非常宽并且浪费了很多空间。

注意：这是针对 d3 v3，而不是 v4

首先，感谢之前发帖的所有人，纯金。我想为那些可能正在为与水平绘制的树相关的偏移问题而苦苦挣扎的人添加这篇文章。

关键是，如果你在水平树上从 .size() 切换到 .nodeSize()，你会注意到你的根节点似乎跳转/重定向到 (0,0)。根据 d3.js 文档，情况确实如此（请参阅https://github.com/d3/d3-hierarchy/blob/master/README.md#tree_nodeSize）

但是，要进行调整，您只需要确保重新定位您的viewBox. 也就是说，当你.append你svg你需要明确设置你的viewBox。这是我的 hacky 小行，它对我有用......

svg = d3.select("#tree").append("svg")
            .attr("width", width + margin.right + margin.left)
            .attr("height", height + 0 + 0)
            .attr("viewBox", "0 "+(-1*(height-margin.top-margin.bottom)/2)+" "+width+" "+height)
            .append("g")
            .attr("transform", "translate("
                  + margin.left + "," + 0 + ")");

D3 现在通过Observable做事。

要设置 nodeSize查找该行：

main.variable(observer("tree")).define("tree", ["d3","dx","dy"],
function(d3,dx,dy){return(
d3.tree()

并使用添加的常量设置 nodeSize：

main.variable(observer("tree")).define("tree", ["d3","dx","dy"],
function(d3,dx,dy){return(
d3.tree().nodeSize([dx + 10, dy + 10])

或者使用一个函数来设置图表大小的值，如使用较旧的 D3 方法的其他答案中所述。