Question

我在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数据到例子）。

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应产生可见的结果。

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

Answer 2

var tree = d3.layout.tree（）。nodeSize（[150,40]）;

在此处更改宽度值，以更改相邻子节点之间的距离。

Answer 3

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

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

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

3 个答案: