how to fix overlap text and duration in d3.js + react

I use a setinterval to request new data and update d3 chart text.

I found text would overlap and animation would repeat.

Please tell me how to clean up the redundant text and animation and make them smooth.

Thanks!

  // draw and update my chart
  useEffect(() => {
    const interval = setInterval(() => {
      fetchCpuData();
      // update value
      valueLabel.text(percentage * 100);
      // Update the arc and set the gradient animation
      foreground
        .transition()
        .duration(750)
        .ease(d3.easeElastic) // Set the effect of bouncing back and forth
        .attrTween("d", arcTween(percentage * (arcMax - arcMin) + arcMin)); // Set the end angle of the arc
      // Update the pointer marker at the end of the arc and set the gradient animation
      tick
        .transition()
        .duration(750)
        .ease(d3.easeElastic) 
        .attrTween("transform", function () {
// Set the gradient of the "transform" property, the principle is the same as the arcTween method above
          const i = d3.interpolate(
            angleToDegree(preAngle),
            angleToDegree(percentage * (arcMax - arcMin) + arcMin)
          );// get interpolation
          return function (t) {
            return "rotate(" + i(t) + ")";
          };
        });
      preAngle = percentage * arcMax;
    }, 1000);
    return () => {
      d3.select(svgRef.current).exit().remove();
      clearInterval(interval);
    };
  }, [percentage]);