我正在研究响应式水平树布局。链接:d3.js https://codesandbox.io/s/cool-field-vsc6m 。我的子节点正在重叠。
如何以最小距离分隔节点并避免重叠?
最佳答案
我检查了您的代码,发现您使用的是半径常量值(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;
});
关于javascript - 分离节点并避免 d3.js 中树形图中的重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60181044/