d3js Tree Layout圆圈文本之间的垂直距离重叠

Question

我使用d3js为简单的树形象创建了this fiddle。它工作正常。但是，当树变得非常大时，我遇到的问题是节点旁边的文本往往会重叠。所以我需要以某种方式设置垂直距离。我怎样才能做到这一点？下图显示了我的意思：

我尝试使用separation函数添加它，但我想这只是水平更改它。

var tree = d3.layout.tree().nodeSize([1, nodeHeight])
       .separation(function(a, b) {
           var height = a.height + b.width,
               distance = height / 2 + 50; 
               return distance;
       }),
nodes = tree.nodes(data),
links = tree.links(nodes);

Answer 1

我认为兄弟节点不是重叠而是堂兄弟。要解决您的问题，您需要了解tree.separation()的工作原理。

在我的一个项目中。我这样做了

var tree = d3.layout.tree();
tree.nodeSize(/*some stuff here*/)
.separation(function(a, b) {
        return (a.parent == b.parent ? 1 : 1.5);
    });

return（a.parent == b.parent？1：1.5）基本上是说if 节点具有相同的父节点或兄弟节点，然后它们之间的分隔是无，如果它们没有相同的父节点，则它们被视为堂兄弟，因此计算它们之间的距离是节点高度的50％（在nodeSize中定义） ）。

我不擅长解释像专业人士这样的东西，但绝对检查分离方法，并记住它处理堂兄弟节点之间的距离。

Answer 2

我遇到了类似的问题，使用nodeSize（）或split（）提出的相关问题的答案似乎都没有改变布局（或以我期望的方式）。

最后，我在update（）函数中进行了以下简单的缩放更改，并解决了垂直重叠节点的问题。它并不十分优雅，但具有简单的优点：

nodes.forEach((d) => {
  // spread out the vertical axis (if this isn't here, lines tend to overlap on denser graphs)
  d.x = d.x * 2;                  
});