d3js树布局圆形重叠文本之间的垂直距离答案

【问题标题】：d3js Tree Layout vertical distance between text of circle overlapsd3js树布局圆形重叠文本之间的垂直距离
【发布时间】：2017-05-28 19:50:43
【问题描述】：

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

我尝试使用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);

【问题讨论】：

可能重复stackoverflow.com/questions/13032722/…，您能否提供一个导致您的jsfiddle出错的树数据示例

标签： javascript d3.js tree

【解决方案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) 基本上是说如果节点具有相同的父节点或兄弟节点，则它们之间的分隔是无的，如果它们没有相同的父节点，则它们被视为堂兄弟，因此它们之间的计算距离是节点高度的 50%（您在 nodeSize 中定义） )。

我不擅长解释专业人士所做的事情，但一定要检查分离方法并记住它处理表亲节点之间的距离。

【讨论】：

【解决方案2】：

我遇到了类似的问题，并且对建议使用 nodeSize() 或分离() 的相关问题的答案似乎都没有改变布局（或者，以我期望的方式）。

最后，我在 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;                  
});

【讨论】：