在d3.js中分离节点，避免树形图重叠

Question

我正在做一个响应式的水平树布局。链接: d3.js https://codesandbox.io/s/cool-field-vsc6m。我的子节点重叠了。

如何以最小的距离分隔节点并避免重叠？

​

。代码可以在上面的代码沙箱链接中找到。

Answer 1

我检查了您的代码，发现您使用的是半径(45)的常量值。

我已经编辑了你的代码，并保存了动态半径的逻辑。我不确定你是否能保存它。所以，我把半径的逻辑也放在这里。

我还建议您不要在节点内使用标签，以获得更好的视觉体验，并使用工具提示。这只是一个建议，由你决定。

如果它解决了你的问题，请让我知道。

​

node.append("circle").attr("r", function(d, i) {
  const padding = 5
  // find siblings of a  node
  let siblings = (d.parent && d.parent.children) || null;
  // find minimum radius based on their x values so they don't overlap.
  let radius =
    siblings && siblings.length > 1 ?
    (siblings[1].x - siblings[0].x - padding) / 2 :
    45;
  return radius;
});

​

​

​