Javascript D3树垂直分离

我使用的是D3树布局，例如：

我已经根据自己的需要修改了它，现在遇到了一个问题。这个例子也有同样的问题，如果你打开了太多的节点，那么它们就会变得紧凑，使得阅读和交互变得困难。我想定义一个节点之间的最小垂直空间，同时重新调整阶段的大小，以允许这样的间距

我尝试修改分离算法以使其正常工作：

.separation(function (a, b) {
    return (a.parent == b.parent ? 1 : 2) / a.depth;
})

那没用。我还试着计算哪个深度的孩子最多，然后告诉舞台的高度是

children*spaceBetweenNodes

。这让我更接近了，但仍然不准确

depthCounts = [];
nodes.forEach(function(d, i) { 
    d.y = d.depth * 180;

    if(!depthCounts[d.depth])
        depthCounts[d.depth] = 0;

    if(d.children)
    {
        depthCounts[d.depth] += d.children.length;
    }
});

tree_resize(largest_depth(depthCounts) * spaceBetweenNodes);

我还尝试在下面的方法中更改节点的

x

值，该方法计算

y

间隔，但没有更改。我也会发布这个更改，但我从代码中删除了它

nodes.forEach(function(d, i) { 
    d.y = d.depth * 180;
});

---

如果你能建议一种方法或知道一种方法，我可以完成一个最小的间距垂直节点之间请张贴。我将非常感激。我可能遗漏了一些非常简单的东西。

在谷歌群组的一位用户的帮助下，我找到了答案。我找不到那个职位。该解决方案要求您在一个位置修改D3.js，这是不推荐的，但这是我能找到的唯一一个解决这个问题的方法

从第

5724行开始，或使用此方法：
d3\u布局\u树在后面

更改：

d3_layout_treeVisitAfter(root, function(node) {
    node.x = (node.x - x0) / (x1 - x0) * size[0];
    node.y = node.depth / y1 * size[1];
    delete node._tree;
});

d3_layout_treeVisitAfter(root, function(node) {
    // make sure size is null, we will make it null when we create the tree
    if(size === undefined || size == null) 
    { 
        node.x = (node.x - x0) * elementsize[0]; 
        node.y = node.depth * elementsize[1]; 
    } 
    else 
    { 
        node.x = (node.x - x0) / (x1 - x0) * size[0];
        node.y = node.depth / y1 * size[1]; 
    } 
    delete node._tree;
});

至：

d3_layout_treeVisitAfter(root, function(node) {
    node.x = (node.x - x0) / (x1 - x0) * size[0];
    node.y = node.depth / y1 * size[1];
    delete node._tree;
});

d3_layout_treeVisitAfter(root, function(node) {
    // make sure size is null, we will make it null when we create the tree
    if(size === undefined || size == null) 
    { 
        node.x = (node.x - x0) * elementsize[0]; 
        node.y = node.depth * elementsize[1]; 
    } 
    else 
    { 
        node.x = (node.x - x0) / (x1 - x0) * size[0];
        node.y = node.depth / y1 * size[1]; 
    } 
    delete node._tree;
});

在下面添加一个名为：
elementsize
的新变量，并将其默认为
[1,1]
到第5731行

var hierarchy = d3.layout.hierarchy().sort(null).value(null)
    , separation = d3_layout_treeSeparation
    , elementsize = [ 1, 1 ] // Right here
    , size = [ 1, 1 ];

下面是一个名为
tree.size=function（x）
的方法。在该定义下添加以下内容：

tree.elementsize = function(x) {
    if (!arguments.length) return elementsize;
    elementsize = x;
    return tree;
};

最后，当您创建树时，您可以像这样更改
elementsize

var tree = d3.layout.tree()
             .size(null)
             .elementsize(50, 240);

您提出的原始修复方案将起作用，您只需确保在将所有内容添加到画布后执行。d3会在每次输入、退出、附加等操作时重新计算布局。完成所有操作后，您可以通过摆弄d.y来确定深度

nodes.forEach(function(d) { d.y = d.depth * fixdepth});

我知道我不应该对其他答案做出回应，但我没有足够的声誉来添加评论

无论如何，我只是想为使用最新d3.v3.js文件的人更新这个。（我想这是因为一个新版本，因为接受答案中的行引用对我来说是错误的。）

您正在编辑的d3.layout.tree函数位于第6236行和第6345行之间。第6318行开始的d3_布局_树。层次结构变量在第6237行声明。关于tree.elementsize的部分仍然存在——我把它放在第6343行

最后（我认为这是一个错误）：创建树时，将尺寸放在方括号内，就像通常使用“大小”一样。因此：

截至2016年，我能够通过使用

tree.nodeSize([height, width])


API参考有点差，但它的工作方式非常简单。请确保在
tree.size（[高度，宽度]）之后使用它，否则您将再次重写您的值

更多参考信息：
这是d3版本3中的Google Groups链接，了解更多信息，现在有一个nodeSize属性，它将执行与上述修改相同的操作。参考：如果您使用的是版本3，您不应该进行修改。已经有一个nodeSize属性可以用来代替elementsize。谢谢您，好心的先生！！：）