React中使用D3.js拖拽节点出现重复渲染问题求助

在React中使用D3.js开发力导向图，添加拖拽功能后出现节点重复显示的问题：原本应显示6个节点元素，实际出现12个或图形元素。

问题原因分析 #

1. 重复渲染叠加元素：React组件重渲染时，会重复执行D3的创建元素逻辑，旧元素未被清除，新元素不断叠加，最终数量翻倍。
2. 选择器匹配错误：文本元素的选择器用了selectAll('circle')，但实际要创建的是text元素，导致每次都无法匹配到已有文本，进而重复创建。
3. 元素分组管理混乱：节点和文本分开创建，没有统一到同一个<g>容器中，既不利于拖拽同步，也增加了元素管理的复杂度。

修复步骤及代码示例 #

核心修复点 #

• 每次绘制前清空容器内的旧元素，避免重复叠加
• 修正选择器，确保数据绑定匹配正确元素
• 将节点和文本统一放入同一个<g>，拖拽时同步移动
• 在React中用useEffect控制D3渲染时机，避免不必要的重渲染

修改后的完整代码：

import { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const ForceGraph = ({ nodes, links, getNodeColor }) => {
  const svgRef = useRef(null);

  useEffect(() => {
    if (!svgRef.current || !nodes.length) return;

    const svg = d3.select(svgRef.current);
    // 清空所有旧分组元素，避免重复创建
    svg.selectAll('g').remove();

    // 初始化力导向模拟
    const simulation = d3.forceSimulation(nodes)
      .force('link', d3.forceLink(links).id(d => d.id).distance(100))
      .force('charge', d3.forceManyBody().strength(-300))
      .force('center', d3.forceCenter(400, 300));

    // 拖拽交互逻辑
    const dragInteraction = d3.drag()
      .on('drag', (event, node) => {
        node.fx = event.x;
        node.fy = event.y;
        simulation.alpha(1).restart();
      })
      .on('end', (event, node) => {
        // 可选：松开拖拽后允许节点继续自由运动
        // node.fx = null;
        // node.fy = null;
      });

    // 创建连线组
    const linkGroup = svg.append('g');
    const linkElements = linkGroup
      .selectAll('line')
      .data(links)
      .enter()
      .append('line')
      .attr('stroke-width', 1)
      .attr('stroke', '#E5E5E5');

    // 创建节点组：每个节点对应一个<g>，包含circle和text
    const nodeGroup = svg.append('g');
    const nodeElements = nodeGroup
      .selectAll('g')
      .data(nodes)
      .enter()
      .append('g')
      .call(dragInteraction); // 拖拽绑定到整个节点组

    // 添加圆形节点
    nodeElements.append('circle')
      .attr('r', 20)
      .attr('fill', getNodeColor);

    // 添加节点文本
    nodeElements.append('text')
      .text(node => node.label)
      .attr('font-size', 15)
      .attr('dx', 25) // 调整位置避免与圆形重叠
      .attr('dy', 5);

    // tick事件更新所有元素位置
    simulation.on('tick', () => {
      linkElements
        .attr('x1', d => d.source.x)
        .attr('y1', d => d.source.y)
        .attr('x2', d => d.target.x)
        .attr('y2', d => d.target.y);

      nodeElements
        .attr('transform', d => `translate(${d.x}, ${d.y})`); // 平移整个节点组，同步circle和text
    });

    // 组件卸载时停止模拟
    return () => {
      simulation.stop();
    };
  }, [nodes, links, getNodeColor]);

  return <svg ref={svgRef} width={800} height={600}></svg>;
};

export default ForceGraph;

关键修改说明 #

• 清空旧元素：每次渲染前调用svg.selectAll('g').remove()，彻底清除之前创建的分组元素，从根源避免重复叠加。
• 统一节点分组：将每个节点的圆形和文本放入同一个<g>，拖拽时只需移动整个组，保证文本与圆形位置完全同步。
• 修正选择器逻辑：节点组使用selectAll('g')匹配分组元素，避免了原代码中选择器与创建元素不匹配的问题。
• React生命周期适配：用useEffect包裹D3逻辑，依赖项设置为nodes、links和getNodeColor，只有当数据变化时才重新绘制，减少不必要的渲染。

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