React原生d3方位等面积旋转不平滑

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

const D3Chart = ({ data }) => {
  const svgRef = useRef();

  useEffect(() => {
    const svg = d3.select(svgRef.current);
    // 初始化图表
    const g = svg.append('g');

    // 旋转动画
    let startAngle = 0;
    const duration = 2000; // 动画持续时间

    const rotate = () => {
      startAngle += 1;
      g.attr('transform', `rotate(${startAngle})`);
      if (startAngle < 360) {
        requestAnimationFrame(rotate);
      }
    };

    requestAnimationFrame(rotate);

    return () => svg.selectAll('*').remove();
  }, [data]);

  return (
    <svg ref={svgRef} width="500" height="500"></svg>
  );
};

export default D3Chart;

import React from 'react';
import './D3Chart.css';

const D3Chart = ({ data }) => {
  return (
    <div className="chart-container">
      <svg className="rotating-svg">
        {/* D3 图表内容 */}
      </svg>
    </div>
  );
};

export default D3Chart;

/* D3Chart.css */
.chart-container {
  perspective: 1000px;
}

.rotating-svg {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

// 示例：优化旋转计算
const angle = d3.scaleLinear()
  .domain([0, data.length - 1])
  .range([0, 2 * Math.PI]);

const rotate = (d, i) => {
  const a = angle(i);
  return `rotate(${a * 180 / Math.PI})`;
};