将d3.layout.force v3升级至d3.forceSimulation v7遇异常效果问题

1. 初始“you”节点进入方向固定的原因 #

D3.js v3 的 d3.layout.force() 在启动时，会自动为未设置 x、y 属性的节点分配随机初始坐标，因此“you”节点每次加载都会从随机方向进入画布。
而 D3.js v7 的 d3.forceSimulation() 不会自动生成随机初始位置，若节点未指定 x、y，默认会将其放置在坐标原点附近，导致每次启动时节点的初始位置固定，进入方向一致。

2. 新添加节点卡在左上角的原因 #

• 在 v3 中，添加新节点后调用 force.nodes(newNodeList).start()，力布局会自动为新节点分配初始随机位置，并重新启动力模拟。
• 在 v7 中，添加新节点后，仅调用 simulation.nodes(updatedNodes) 不足以让新节点获得合理初始位置：未设置 x、y 的新节点会默认停在(0,0)（即画布左上角）。同时，v7 的力模拟需要显式调用 simulation.alpha(0.3).restart() 来重启模拟，让新节点参与力计算，否则新节点不会受到力的作用，一直停留在初始位置。

修复建议 #

• 针对初始节点方向问题：在创建节点数据时，手动为“you”节点设置随机的初始 x、y 值，比如：

  nodes.push({
    id: "you",
    x: Math.random() * width,
    y: Math.random() * height
  });
  

• 针对新节点卡左上角问题：添加新节点时，为其设置初始位置（比如基于现有节点的位置或随机坐标），然后更新模拟的节点列表并重启模拟：

  // 添加新节点并设置初始位置
  const newNode = {
    id: "new-node",
    x: Math.random() * width,
    y: Math.random() * height
  };
  nodes.push(newNode);
  // 更新模拟节点并重启
  simulation.nodes(nodes);
  simulation.alpha(0.3).restart();
  

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