D3 force-graph更新时重复渲染而非更新，React组件传新数据后旧图残留

你使用join()替换enter()的思路是完全正确的，当前重复渲染的问题主要来自几个D3更新逻辑和React结合的常见疏漏，可按以下步骤排查修复：

• 首先确认数据绑定的唯一key是否有效
  你当前给link绑定的key是d=>d.agentName，如果存在多条边对应同一个agentName、或者边的唯一标识不是agentName的情况，D3无法正确识别需要退出的旧元素，就会出现旧元素残留。建议用边的唯一ID作为key，若无单独ID可以用d => ${d.source.id}-${d.target.id}`` 这类组合唯一值。
• 补全join的update阶段逻辑
  你当前只在enter阶段设置了样式属性，数据更新时现有元素的属性不会同步修改，看起来就像旧元素没有消失。所有需要随数据变化的属性，都要在update阶段也同步赋值。
• 简化exit阶段的冗余写法
  你当前exit阶段的exit.call(exit=>exit).remove()属于冗余写法，直接调用remove()即可。
• 确认React侧的触发逻辑正确
  检查包裹D3逻辑的useEffect是否将LINKS、节点数据等加入依赖数组，否则新数据传入组件时D3的更新逻辑根本不会触发，自然不会清理旧元素。

修正后的核心代码示例 #

// SVGs creation ---
const linkSvg = svgRef.current
    .selectAll('path')
    .data(LINKS, d => d.id ?? `${d.source.id}-${d.target.id}`) // 替换为实际的边唯一标识
    .join(
        enter => enter.append('path')
            .attr('stroke', d => !d.weight ? "gray" : linkStyles.onlineColor)
            .attr('stroke-width', d => linkWeightScale(d.weight))
            .attr('stroke-dasharray', d => !d.weight ? linkDashedScale(d.weight) : null),
        update => update
            // update阶段要同步更新所有动态属性
            .attr('stroke', d => !d.weight ? "gray" : linkStyles.onlineColor)
            .attr('stroke-width', d => linkWeightScale(d.weight))
            .attr('stroke-dasharray', d => !d.weight ? linkDashedScale(d.weight) : null),
        exit => exit.remove()
    )

如果调整link逻辑后依然有重复元素，需要排查节点元素的更新逻辑是否也存在相同的疏漏，节点也要按照同样的规则写join()的三个阶段逻辑、绑定正确的唯一key。

问题现象参考 #

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