D3 树垂直分离

Question

我使用的是D3树布局，例如：http://mbostock.github.com/d3/talk/20111018/tree.html

我已经根据我的需求对其进行了修改，并且遇到了一个问题。该示例也存在相同的问题，如果您打开了太多节点，那么它们就会变得紧凑，并使读取和交互变得困难。我想在重新调整舞台尺寸时定义节点之间的最小垂直空间，以允许这样的间距。

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

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

这不起作用。我还尝试计算哪个深度有最多的孩子，然后告诉舞台的高度是儿童*空间之间的节点。这让我更接近了，但仍然不准确。

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;
});

如果您可以建议一种方法或知道一种方法，我可以在节点之间垂直完成最小间距，请发布。我将不胜感激。我可能错过了一些非常简单的东西。

Answer 1

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

不管怎样，我只是想为使用最新d3.v3.js文件的人更新这个。（我假设这是因为新版本，因为接受答案中的行引用对我来说是错误的。）

d3.布局。您正在编辑的树函数位于第6236行和第6345行之间。d3_layout_treeVisitAfter从第6318行开始。层次结构变量在第6237行声明。关于树的位。elementsize仍然有效-我把它放在第6343行。

最后（我假设这是一个错误）：当您创建树时，将尺寸放在方括号内，就像您通常使用“size”一样。所以：

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

Answer 2

我在谷歌群组用户的帮助下解决了这个问题。我找不到帖子。解决方案要求你在一个地方修改D3.js，这是不推荐的，但这是我唯一能找到的解决这个问题的方法。

从第< code>5724行或该方法开始:< code > D3 _ layout _ treeVisitAfter

改变：

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 ];

在它下面有一个名为< code > tree . size = function(x)的方法。在该定义下增加以下内容:

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

最后，当你创建树的时候，你可以像这样改变元素大小

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

Answer 3

截至2016年，我能够实现这一目标，只需

tree.nodeSize([height, width])

https://github.com/mbostock/d3/wiki/Tree-Layout#nodeSize

API参考有点差，但是它非常简单。请确保在< code>tree.size([height，width])之后使用它，否则您将再次覆盖您的值。

更多参考：D3使用NodeSize在节点之间进行树布局分离