如何查找用于在饼图上创建标签的X、Y坐标(ReactJS)

import React from 'react';

const PieChart = ({ data }) => {
  // Calculate total sum
  const total = data.reduce((sum, item) => sum + item.value, 0);

  // Calculate angles
  let startAngle = 0;
  const angles = data.map(item => {
    const angle = (item.value / total) * 360;
    const endAngle = startAngle + angle;
    const labelAngle = (startAngle + endAngle) / 2;
    const labelX = Math.cos((labelAngle * Math.PI) / 180);
    const labelY = Math.sin((labelAngle * Math.PI) / 180);
    startAngle = endAngle;
    return {
      ...item,
      angle,
      labelX,
      labelY
    };
  });

  return (
    <svg width={400} height={400}>
      {angles.map((item, index) => (
        <g key={index}>
          <path
            d={getArcPath(item)}
            fill={item.color}
          />
          <text
            x={200 + item.labelX * 150}
            y={200 + item.labelY * 150}
            textAnchor="middle"
          >
            {item.label}
          </text>
        </g>
      ))}
    </svg>
  );
};

const getArcPath = (item) => {
  // Calculate start and end points of the arc
  const startX = Math.cos((item.startAngle * Math.PI) / 180) * 150 + 200;
  const startY = Math.sin((item.startAngle * Math.PI) / 180) * 150 + 200;
  const endX = Math.cos((item.endAngle * Math.PI) / 180) * 150 + 200;
  const endY = Math.sin((item.endAngle * Math.PI) / 180) * 150 + 200;

  // Create the arc path
  const largeArcFlag = item.angle <= 180 ? 0 : 1;
  const arcPath = `M ${startX} ${startY} A 150 150 0 ${largeArcFlag} 1 ${endX} ${endY} L 200 200 Z`;
  return arcPath;
};

// Usage example
const data = [
  { label: 'A', value: 25, color: 'red' },
  { label: 'B', value: 50, color: 'green' },
  { label: 'C', value: 75, color: 'blue' },
  { label: 'D', value: 100, color: 'yellow' },
];

const App = () => <PieChart data={data} />;

export default App;