如何解决React集成D3.js中setInterval更新引发的文本重叠与动画重复问题并实现平滑更新

我来帮你搞定这个D3图表更新的问题，文本重叠和动画重复的根源主要是没有复用文本元素以及未中断正在进行的过渡动画导致的。咱们一步步来修复：

1. 复用文本元素，避免重复创建 #

你当前的代码里直接用valueLabel.text(...)，如果valueLabel是每次更新时重新选择或者没有预先创建唯一的元素，就会不断新增文本节点造成重叠。正确的做法是先检查元素是否存在，不存在再创建，存在则直接更新内容：

// 先获取已有的文本元素，没有则创建
let valueLabel = d3.select(svgRef.current).select(".cpu-value-label");
if (valueLabel.empty()) {
  valueLabel = d3.select(svgRef.current)
    .append("text")
    .attr("class", "cpu-value-label")
    // 这里补充你的文本位置、样式等属性，比如居中对齐
    .attr("text-anchor", "middle")
    .attr("dy", ".35em")
    .attr("x", /* 替换为你的x坐标 */)
    .attr("y", /* 替换为你的y坐标 */);
}
// 再更新文本内容
valueLabel.text((percentage * 100).toFixed(1)); // 可以加toFixed避免小数位数过多

2. 中断未完成的动画，防止堆积 #

每次触发新的过渡前，调用.interrupt()方法停止元素上正在进行的动画，这样新动画就不会和旧动画叠加执行：

// 更新圆弧动画前先中断旧动画
foreground
  .interrupt() // 关键：停止当前正在进行的过渡
  .transition()
  .duration(750)
  .ease(d3.easeElastic)
  .attrTween("d", arcTween(percentage * (arcMax - arcMin) + arcMin));

// 更新指针标记同理
tick
  .interrupt()
  .transition()
  .duration(750)
  .ease(d3.easeElastic)
  .attrTween("transform", function () {
    const i = d3.interpolate(
      angleToDegree(preAngle),
      angleToDegree(percentage * (arcMax - arcMin) + arcMin)
    );
    return function (t) {
      return "rotate(" + i(t) + ")";
    };
  });

3. 修正角度更新逻辑，避免动画跳变 #

你代码里的preAngle = percentage * arcMax;计算错误，应该更新为当前的实际结束角度，否则下次插值的起始角度会偏差，导致动画跳变：

// 修正为当前的实际角度值
preAngle = percentage * (arcMax - arcMin) + arcMin;

4. 优化组件卸载时的清理逻辑 #

在组件卸载时，除了清除定时器，还应该中断所有未完成的动画，避免组件卸载后还有动画在后台执行：

return () => {
  clearInterval(interval);
  // 中断SVG内所有元素的未完成过渡
  d3.select(svgRef.current).selectAll("*").interrupt();
};

修改后的完整代码 #

// 绘制并更新图表
useEffect(() => {
  const interval = setInterval(() => {
    fetchCpuData();
    
    // 复用或创建文本元素
    let valueLabel = d3.select(svgRef.current).select(".cpu-value-label");
    if (valueLabel.empty()) {
      valueLabel = d3.select(svgRef.current)
        .append("text")
        .attr("class", "cpu-value-label")
        .attr("text-anchor", "middle")
        .attr("dy", ".35em")
        .attr("x", /* 替换为你的x坐标 */)
        .attr("y", /* 替换为你的y坐标 */);
    }
    valueLabel.text((percentage * 100).toFixed(1));

    // 更新圆弧并设置渐变动画
    foreground
      .interrupt()
      .transition()
      .duration(750)
      .ease(d3.easeElastic)
      .attrTween("d", arcTween(percentage * (arcMax - arcMin) + arcMin));

    // 更新圆弧末端的指针标记并设置渐变动画
    tick
      .interrupt()
      .transition()
      .duration(750)
      .ease(d3.easeElastic)
      .attrTween("transform", function () {
        const i = d3.interpolate(
          angleToDegree(preAngle),
          angleToDegree(percentage * (arcMax - arcMin) + arcMin)
        );
        return function (t) {
          return "rotate(" + i(t) + ")";
        };
      });

    // 修正角度更新
    preAngle = percentage * (arcMax - arcMin) + arcMin;
  }, 1000);

  return () => {
    clearInterval(interval);
    d3.select(svgRef.current).selectAll("*").interrupt();
  };
}, [percentage]);

这样修改后，文本就不会再重叠，动画也会平滑过渡，不会出现重复执行的情况啦！

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