Javascript 在React插值中设置D3圆弧动画错误

我有react组件，我用3创建了3个圆弧，我想用Attrween为这些圆弧设置动画。但它根本不起作用，我创建了方法arcTween，它需要3个参数；旧角度、新角度和圆弧函数，但它没有正确插值值，并且在转换时没有创建d值

import React, { createRef, useEffect } from "react";
import ReactDOM from "react-dom";
import { select, arc, interpolate, interval } from "d3";

import "./styles.css";

function arcTween(oldData, newData, _arc) {
  const copy = { ...oldData };
  return function() {
    const interpolateStartAngle = interpolate(
        oldData.startAngle,
        newData.startAngle
      ),
      interpolateEndAngle = interpolate(oldData.endAngle, newData.endAngle);

    return function(t) {
      copy.startAngle = interpolateStartAngle(t);
      copy.endAngle = interpolateEndAngle(t);
      return _arc(interpolateStartAngle(t), interpolateEndAngle(t));
    };
  };
}

function App() {
  const svgRef = createRef(null);
  useEffect(() => {
    if (svgRef.current) {
      const svg = select(svgRef.current);
      const p = Math.PI / 2;

      const arc1 = arc()
        .innerRadius(130)
        .outerRadius(140)
        .cornerRadius(20)
        .endAngle(-1.2)
        .startAngle(1);

      const arc2 = arc()
        .innerRadius(130)
        .outerRadius(140)
        .cornerRadius(20)
        .startAngle(1.2)
        .endAngle(3.4);

      const arc3 = arc()
        .innerRadius(130)
        .outerRadius(140)
        .startAngle(3.6)
        .cornerRadius(20)
        .endAngle(5);

      const one = svg
        .append("path")
        .attr("d", arc1)
        .attr("transform", "translate(300,200)")
        .attr("fill", "#ffff00");

      svg
        .append("path")
        .attr("d", arc2)
        .attr("transform", "translate(300,200)");

      svg
        .append("path")
        .attr("d", arc3)
        .attr("transform", "translate(300,200)");
    }
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <svg ref={svgRef} width="600" height="400" />
    </div>
  );
}

您可以检查正在运行的应用程序