D3力导向图实现同心圆节点时节点全部堆叠在(0,0)问题求助

问题原因 #

你代码的核心错误是对SVG的<g>（分组）元素属性使用不正确：

• 你在tick回调中给节点绑定的分组元素nodeSvg2设置了cx、cy属性，但<g>元素本身不支持这两个属性，只有<circle>、<ellipse>这类基础图形元素才有cx/cy属性。
• 分组元素的位置移动需要通过transform属性的translate方法实现，你没有对分组做正确的位移，所以所有分组都默认停留在SVG坐标系原点(0,0)，导致里面的同心圆全部堆叠。

修复方案 #

只需要修改tick事件中节点分组的位置设置逻辑即可，把原来设置cx/cy的代码替换为设置transform属性：

simulation.on("tick", () => {
    // 替换原来的cx、cy设置，用translate移动整个分组
    nodeSvg2
        .attr("transform", d => `translate(${d.x}, ${d.y})`);
    linkSvg
        .attr("d", d => d3.line()([
            [d.source.x, d.source.y],
            [d.target.x, d.target.y]
        ]));
    textSvg
        .attr('x', d => d.x).attr('y', d => d.y);
})

可选优化 #

你可以把文本元素也直接放到节点分组<g>内部，就不需要单独给文本设置位置了，分组移动时文本会自动跟随位移，代码结构更简洁。

内容的提问来源于stack exchange，提问作者Daniel Tkach