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

Question

我试过this中的建议回答，但这没有任何区别。

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

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

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 数据到示例)。

Answer 1

我的一个乐于助人、慷慨大方的 friend ，在网络开发行业工作，已经能够为我解决这个问题，解决方案如下。

负责距离的线是这样的:

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

这指定了父子之间的像素间隔(在本例中为 180)。

如果文本也需要调整，有问题的行是:

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

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

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