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

【问题标题】：How to increase distance between child nodes in a D3 Collapsible Tree?如何增加 D3 可折叠树中子节点之间的距离？
【发布时间】：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 数据与示例）。

【问题讨论】：

标签： javascript jquery d3.js tree

【解决方案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]);

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

【讨论】：