D3v4力导向图添加多形状节点异常：节点聚集无位置更新求助

嘿，我一眼就发现你代码里的核心问题了！你把节点元素放在了<g>容器中，但在ticked事件函数里，却尝试用cx和cy属性来更新它的位置——这俩属性是给<circle>、<rect>这类基础图形元素用的，<g>（组元素）根本不支持这两个属性，所以节点的位置完全没被正确更新，自然全都堆在角落啦。

下面是具体的修复步骤：

1. 修正ticked函数的节点位置更新逻辑 #

把原来给节点设置cx/cy的代码，改成用transform属性来定位<g>元素：

function ticked() {
  link
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

  // 把原来的cx/cy改成transform的translate
  node
    .attr("transform", function(d) { 
      return "translate(" + d.x + "," + d.y + ")"; 
    });
}

这样<g>容器就会随着力导向模拟的计算结果，正确移动到对应的坐标位置，里面的符号图形也会跟着一起移动。

2. 拖拽函数的可选优化 #

你的拖拽函数逻辑是对的，但可以调整拖拽结束后的行为：如果想让节点拖拽后保持固定位置，就保留d.fx = d.x; d.fy = d.y;；如果想让节点继续参与力模拟，可以把这两行改成d.fx = null; d.fy = null;，这样松开鼠标后节点会继续受力移动。

3. 符号图形的锚点确认 #

你用d3.symbol生成的图形默认是以中心为锚点的，所以<g>元素用translate(d.x, d.y)定位后，符号会自动居中在节点的坐标上，不需要额外调整偏移，这部分是没问题的。

完整修复后的关键代码片段 #

这里把修改后的ticked函数和节点创建部分整合一下，方便你参考：

// 绘制节点（这部分你的代码没问题）
var node = g.selectAll(".node")
  .data(graph.nodes)
  .enter().append("g")
  .attr("class", "node")
  .call(d3.drag()
    .on("start", dragstarted)
    .on("drag", dragged)
    .on("end", dragended));

// 生成符号图形（这部分也没问题）
var circle = node.append("path")
  .attr("d", d3.symbol()
    .type(function (d) {
      if (d.shape == "rect") {
        return d3.symbolSquare;
      } else if (d.shape == "circle") {
        return d3.symbolCircle;
      }
    })
    .size(400))
  .style("stroke", "#999")
  .style("stroke-opacity", 0.6)
  .style("fill", function (d) { return "blue" });

// 修正后的ticked函数
function ticked() {
  link
    .attr("x1", function(d) { return d.source.x; })
    .attr("y1", function(d) { return d.source.y; })
    .attr("x2", function(d) { return d.target.x; })
    .attr("y2", function(d) { return d.target.y; });

  node
    .attr("transform", d => `translate(${d.x}, ${d.y})`);
}

做完这些修改后，运行代码应该就能看到节点按照力导向模拟的规则正常分散、移动，不会再堆在角落啦。

内容的提问来源于stack exchange，提问作者Oliver Scott