D3树垂直分离 [英] D3 tree vertical separation

问题描述

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

I am using the D3 tree layout, such as this one: http://mbostock.github.com/d3/talk/20111018/tree.html

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

I have modified it for my needs and am running into an issue. The example has the same issue too where if you have too many nodes open then they become compact and makes reading and interacting difficult. I am wanting to defined a minimum vertical space between nodes while re-sizing stage to allow for such spacing.

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

I tried modifying the separation algorithm to make it work:

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

那没有用.我还尝试计算哪个深度有最多的孩子，然后告诉舞台的高度是 children * spaceBetweenNodes.这让我更接近，但仍然不准确.

That didn't work. I also tried calculating which depth had the most children then telling the height of the stage to be children * spaceBetweenNodes. That got me closer, but still was not accurate.

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 分离，但没有雪茄.我也会发布该更改，但我将其从代码中删除.

I also tried to change the node's x value too in the method below where it calculates the y separation, but no cigar. I would post that change too but I removed it from my code.

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

如果您可以提出一种方法或知道一种方法，我可以在节点之间实现最小垂直间距，请发布.我将不胜感激.我可能遗漏了一些非常简单的东西.

If you can suggest a way or know a way that I can accomplish a minimum spacing vertically between nodes please post. I will be very grateful. I am probably missing something very simple.

推荐答案

截至 2016 年，我仅使用

As of 2016, I was able to achieve this using just

tree.nodeSize([height, width])

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

API 参考有点差，但工作得非常直接.请务必在 tree.size([height, width]) 之后使用它，否则您将再次覆盖您的值.

The API Reference is a bit poor, but is works pretty straight forward. Be sure to use it after tree.size([height, width]) or else you will be overriding your values again.

更多参考:D3 Tree Layout Separation between Nodes using NodeSize

这篇关于D3树垂直分离的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！