javascript - 分离节点并避免 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;
});