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

Question

我在这个答案中尝试了这个建议,但它没有任何区别.

我正在使用D3网站上的标准可折叠树示例.

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

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

但没什么.该文档还建议调整separation属性,但修改其中列出的默认属性与任何随机值似乎不会对布局产生任何影响:

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

我错过了一些明显的东西吗 我没有做任何JavaScript或jQuery,这是我第一次使用这个库,所以我只是想尽我所能.

尝试实现此目的的原因是每个节点的名称都很长,并且在扩展具有大量子节点的子节点时,它们以丑陋的方式重叠(我使用不同的json数据到示例中的那个).

Answer 1

我的一个有用和慷慨的朋友,在网络开发行业工作,已经能够为我解决问题,解决方案如下.

照顾距离的线是这样的:

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

这指定了父项和子项之间的像素分隔(在这种情况下为180).

如果还需要调整文本,那么该行是:

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

这只是文本的间隔,它位于节点的左侧或右侧,具体取决于它是否是子节点.调整-10或10应产生可见的结果.

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