如何增加 D3 可折叠树中子节点之间的距离？

Posted 2023-03-31

【中文标题】如何增加 D3 可折叠树中子节点之间的距离？

【英文标题】：How to increase distance between child nodes in a D3 Collapsible Tree?

【发布时间】：2014-07-18 08:37:05

【问题描述】：

我已经尝试了this 答案中的建议，但没有任何区别。

我正在使用 D3 网站上的标准可折叠树 example。

具体来说，正如答案所示，我添加了以下内容：

var tree = d3.layout.tree()
    .separation(function(a, b)  return ((a.parent == root) && (b.parent == root)) ? 3 : 1; )
    .size([height, width - 160]);

但什么都没有。 documentation 还建议调整 separation 属性，但是用任何随机值修改那里列出的默认值似乎对布局没有影响：

.separation(function(a, b)  return a.parent == b.parent ? 1 : 7; ) // no effect

我是否遗漏了一些明显的东西？我没有做过任何 javascript 或 jQuery，这是我第一次使用这个库，所以我只是想尽我所能。

尝试实现这一点的原因是每个节点的名称都很长，并且当扩展具有很多子节点的子节点时，它们会以一种丑陋的方式重叠（我使用的 json 数据与示例）。

【参考方案1】：

我的一位乐于助人和慷慨的朋友，在网络开发行业工作，已经能够为我解决问题，解决方案如下。

照顾距离的线是这样的：

nodes.forEach(function(d)  d.y = d.depth * 180; );

这指定了父子节点之间的像素间隔（在本例中为 180）。

如果文字也需要调整，有问题的行是：

.attr("x", function(d)  return d.children || d._children ? -10 : 10; )

这只是分隔文本，它位于节点的左侧或右侧，具体取决于它是否为子节点。调整 -10 或 10 应该会产生可见的结果。

希望对遇到这个问题的人有所帮助！

【讨论】：

在nodes.forEach - 函数中，还可以调整节点之间的垂直距离，如下所示：首先定义var rootNode = nodes[nodes.length-1]，然后编写d.x = 5 * (d.x - rootNode.x)

【参考方案2】：

nodes.forEach(function(d)  d.y = d.depth * 180; );

它对我有用。这里 180 是两个节点之间的像素距离。您可以根据需要更改值。

【参考方案3】：

var tree = d3.layout.tree().nodeSize([150, 40]);

在这里你改变宽度值，改变相邻子节点之间的距离。