D3力导向图固定节点问题：固定节点导致链接断裂

你的问题核心在于：只在ticked函数里修改了节点DOM的显示位置，但没有同步更新力导向模拟中的节点数据坐标，导致链接依然使用模拟计算的原始x/y值，和节点实际显示位置脱节。

正确的做法是直接在节点数据中设置固定坐标（fx/fy属性），让D3的力导向模拟自动维护固定节点的位置，这样链接会自然指向正确的节点位置，无需在ticked里手动修正。

具体实现步骤 #

1. 初始化时标记固定节点
   在你的节点数据数组中，给需要固定的节点添加fx（固定x坐标）和fy（固定y坐标）属性：

   // 假设你的节点数据是nodes数组
   nodes.forEach(d => {
     if (d.id === 'NAME_ONE') {
       d.fx = -50;
       d.fy = 0;
     } else if (d.id === 'NAME_TWO') {
       d.fx = 50;
       d.fy = 0;
     }
     // 其他节点不设置fx/fy，由力导向模拟自动计算位置
   });
   

2. 简化ticked函数
   移除手动修正节点位置的逻辑，直接使用节点数据中的x/y即可，因为模拟会自动保证固定节点的x=fx、y=fy：

   function ticked() {
     node
       .attr('cx', d => d.x)
       .attr('cy', d => d.y);
   
     link
       .attr('x1', d => d.source.x)
       .attr('y1', d => d.source.y)
       .attr('x2', d => d.target.x)
       .attr('y2', d => d.target.y);
   }
   

3. 配置力导向模拟
   确保你的模拟包含必要的力，让非固定节点自然环绕固定节点，比如：

   const simulation = d3.forceSimulation(nodes)
     .force('link', d3.forceLink(links).id(d => d.id)) // 链接力，关联节点与链接
     .force('charge', d3.forceManyBody().strength(-300)) // 斥力，避免节点重叠
     .force('center', d3.forceCenter(0, 0)); // 中心力，让整体布局居中
   

为什么之前的方法无效？ #

D3的力导向模拟会持续计算节点的x/y值，而你在ticked里只是修改了DOM元素的cx/cy，并没有改变节点数据中的x/y。链接的位置是基于节点数据的source.x/target.x，所以会指向模拟计算的原始位置，和你手动调整的节点DOM位置不一致，出现错位。

通过设置fx/fy，模拟会将固定节点的x/y锁定为fx/fy的值，所有依赖节点数据的元素（节点和链接）都会自动保持位置一致，无需额外手动修正。

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