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

那没用.我还尝试计算哪个深度最多的孩子,然后告诉舞台的高度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;
});

如果您可以建议一种方法或知道一种方法,我可以在节点之间垂直实现最小间距,请发布.我将非常感激.我可能错过了很简单的事情.

Answer 1

截至2016年,我只能使用

tree.nodeSize([height, width])

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

API参考有点差,但是非常直接.一定要在之后使用它,tree.size([height, width])否则你将再次覆盖你的价值观.

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