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

很多发现仍然与cluster.size()和cluster.nodeSize()下的d3-hierarchy包相关，我计划可能更新我的示例以使用它。
下面是一个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时，你设置了一个固定的大小，这样树就必须符合这个宽度和高度。当你设置nodeSize时，树必须是动态的，所以它重置了树的大小。
当我在nodeSize之后指定size时，我几乎覆盖了我想要的东西哈哈。

底线：如果你想让nodeSize工作，你不能有一个固定的树大小。它会将大小设置为null。如果你正在声明一个nodeSize，不要声明一个size。
编辑：D3.js实际上更新了文档。感谢做这件事的人，因为它现在更清晰了！

nodeSize属性与tree.size互斥;设置tree.nodeSize会将tree.size设置为null。
这就是我的树现在的样子。我还添加了缩放功能以及如何在矩形内居中文本。
x1c 0d1x的数据

直到我自己做了一些挖掘，我才完全理解了公认的答案，所以我想我也会分享我的发现。

如果您使用的是.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 + ")");

字符串

如果有人正在使用react-d3-tree并希望在节点之间添加margin，您可以添加：

<Tree
                nodeSize={{ x: 250, y: 200 }}
                ...
/>

字符串
并调整值以满足您的要求：）

D3现在通过**Observable**执行操作。

设置行的*nodeSize**look：

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

字符串
然后set nodeSize with added constants：

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

型
或者使用一个函数来设置图表大小的值，就像在其他答案中使用旧的D3方法所讨论的那样。