React应用中更新D3力导向图时如何保留旧节点位置？

我正在使用d3的forceSimulation计算各节点的(x,y)坐标（初始无节点或链接）：

const simulation = d3.forceSimulation()
      .force('charge', d3.forceManyBody().strength(-1000))
      .force('link', d3.forceLink().id(d => d?.id).distance(200))
      .force('collide', d3.forceCollide().radius(150))
      .stop()
      .tick(300)

随后监听simulation的'tick'事件，借助react-flow-renderer的setNodes和setEdges更新图形：

simulation.on('tick', () => {
    setEdges([...simulation.force('link').links()].map(setEdge));
    setNodes([...simulation.nodes()].map(setNode));
})

React部分通过以下逻辑在应用当前nodes和edges时重启simulation：

useEffect(() => {
    simulation.nodes(nodes);
    simulation.force('link').links(edges);
    simulation.alpha(0.1).restart();

    return () => simulation.stop();
}, [nodes, edges])

现在，nodes和edges可能会因节点关系扩展而更新，每次扩展后会得到包含旧值和新值的新数组：
示例：
旧节点：[{ id: 1 }]
新节点：[{ id: 1 }, { id: 2}, { id: 3}]
但每次重启模拟时，会从头重新计算图形布局，导致旧节点位置完全改变。请问是否可以保留旧节点的(x,y)坐标，仅将新节点添加到现有图形中？

当然可以保留旧节点坐标，核心是只给新节点初始化坐标，同时在更新模拟时保留旧节点的x、y值，具体实现步骤如下：

1. 标记新节点并初始化坐标
   扩展节点时，给新节点添加标识（比如isNew: true），并基于关联旧节点的位置设置初始偏移坐标，避免新节点直接堆叠：

   // 新增节点时的处理逻辑示例
   const addNewNodes = (oldNodes, newNodeList) => {
     return oldNodes.concat(newNodeList.map(node => ({
       ...node,
       isNew: true,
       // 基于第一个旧节点的位置随机偏移，保证新节点不会离得太远
       x: oldNodes[0]?.x + Math.random() * 100 - 50,
       y: oldNodes[0]?.y + Math.random() * 100 - 50
     })));
   };
   

2. 修改模拟重启逻辑，保留旧节点坐标
   在useEffect中，不要直接传入新的nodes数组，而是先合并模拟中旧节点的现有坐标，再更新模拟：

   useEffect(() => {
     // 获取模拟当前的节点状态（包含旧节点已计算好的x、y）
     const currentSimNodes = new Map(simulation.nodes().map(n => [n.id, n]));
     // 处理新nodes数组：旧节点复用模拟中的坐标，新节点用初始化的坐标
     const updatedNodes = nodes.map(node => {
       const existingNode = currentSimNodes.get(node.id);
       if (existingNode) {
         // 保留旧节点的位置，覆盖其他属性
         return { ...node, x: existingNode.x, y: existingNode.y };
       }
       return node;
     });
   
     // 更新模拟的节点和链接
     simulation.nodes(updatedNodes);
     simulation.force('link').links(edges);
     // 设置较低的alpha值，让新节点平缓融入布局，避免旧节点大幅移动
     simulation.alpha(0.05).restart();
   
     return () => simulation.stop();
   }, [nodes, edges]);
   

3. 优化力参数提升体验
   可以给新节点单独设置更小的电荷强度，减少对旧节点布局的冲击；同时降低重启时的alpha值，让模拟调整更平缓：

   // 修改charge力，针对新节点调整强度
   const simulation = d3.forceSimulation()
     .force('charge', d3.forceManyBody().strength(d => d.isNew ? -500 : -1000))
     .force('link', d3.forceLink().id(d => d?.id).distance(200))
     .force('collide', d3.forceCollide().radius(150))
     .stop()
     .tick(300);
   

4. 移除新节点标识（可选）
   当模拟稳定后，可以在tick事件中移除新节点的isNew标识，避免后续处理干扰：

   simulation.on('tick', () => {
     const updatedEdges = [...simulation.force('link').links()].map(setEdge);
     const updatedNodes = [...simulation.nodes()].map(node => {
       const { isNew, ...rest } = node;
       return setNode(rest);
     });
     setEdges(updatedEdges);
     setNodes(updatedNodes);
   });
   

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