Html 如何找到用于在饼图（ReactJS）上创建标签的X Y坐标

我需要一些人帮助我越过终点线。我从头开始创建一个饼图，因为我们不允许使用任何库。我开始创建图表，但是我不知道如何为标签获得正确的X和Y坐标。我确信其中涉及到一些计算，但我似乎无法找出正确的一个

我有一个JSFIDLE，上面有我的代码，目前我随机化了X和Y坐标，以便在任何地方显示测试。我想知道如何将其添加到正确的名称中

let切片=[
{百分比：0.7307692307692307，颜色：“绿色”，资产类型：“多户型”}，
{百分比：0.07692307692307693，颜色：“红色”，资产类型：“工业”}，
{百分比：0.07692307692307693，颜色：“黄色”，资产类型：“特殊用途”}，
{百分比：0.07692307692307693，颜色：“灰色”，资产类型：“空地”}，
{百分比：0.0384615384461538464，颜色：“蓝色”，资产类型：“混合使用”}
]
类PieChart扩展了React.Component{
建造师（道具）{
超级（道具）
}
render（）{
让viewBox=`-${this.props.width}-${this.props.width}${this.props.width*2}${this.props.width*2}`
let transform=“rotate（0）”；//如果要将其旋转一定角度，请更改此变换对象中的第一个数字
返回(
{getpath（this.props.slices，this.props.width）}您好
);
}
}
函数GetCoordinationForPercent（百分比）{
常数x=Math.cos（2*Math.PI*百分比）；
常数y=Math.sin（2*Math.PI*百分比）；
返回[x，y]；
}
设累积百分比=0；
const getpath=（片，大小）=>{
设路径=[]；
slices.forEach（slice=>{
let[startX，startY]=GetCoordinates for Percent（累积百分比）；
累积百分比+=切片百分比；
常数[endX，endY]=获取百分比的坐标（累积百分比）；
//如果切片超过50%，则取大弧（长距离）
constlargearcflag=slice.percent>0.5？1:0；
//创建一个数组并加入它只是为了代码可读性
常量路径数据=[
`M${startX*size}${startY*size}`，//移动
`A${size}${size}0${largeArcFlag}1${endX*size}${endY*size}`，//弧（大小与半径相同）
`L 0`，//行
].加入（“”）；
路径推送（+测试）
});
返回路径；
}
ReactDOM.render（，document.querySelector（“#app”））

您可以使用鼠标事件来查找

POC：

const circ=document.querySelector（'.circ'）；
const x=document.querySelector（'.x'）；
const y=document.querySelector（'.y'）；
circ.addEventListener（“mousemove”，（e）=>{
x、 innerHTML='x:'+e.offsetX；
y、 innerHTML='y:'+e.offsetY；
});
.circ{
保证金：20px自动0自动；
高度：100px；
宽度：100px；
背景：红色；
边界半径：50%；
}

我认为您的JSFIDLE与这里的代码不匹配。另外，有一点提示，您可以将
width
声明为渲染中的一个变量，然后不必编写
this.props.width
十次。Aka write
const{width}=this.props在渲染函数中，然后只使用
width
。我将发布的代码复制到一个新的JSFIDLE（带有React）中，它显示了相同的结果，看起来很奇怪。至于{width}的事，谢谢。我正在使用其他人的示例，没有修改他们的代码。很抱歉，我正在尝试在渲染之前找到每个切片的X和Y坐标，以便可以将标签动态附加到每个切片。很抱歉，我没有再次理解您的意思。。。你能上传你想要的图片吗？
let slices = [
  {percent: 0.7307692307692307, color: "green", asset_type: "Multifamily"},
  {percent: 0.07692307692307693, color: "red", asset_type: "Industrial"}, 
  {percent: 0.07692307692307693, color: "yellow", asset_type: "Special Purpose"}, 
  {percent: 0.07692307692307693, color: "grey", asset_type: "Vacant Land"},
  {percent: 0.038461538461538464, color: "blue", asset_type: "Mixed Use"}
]


class PieChart extends React.Component{

    constructor(props) {
        super(props)
    }

    render() {
        let viewBox=` -${this.props.width} -${this.props.width} ${this.props.width*2} ${this.props.width*2}`

        let transform = "rotate(0 0 0)"; //if you want it rotated a certain angle change the first number in the this transform object
        return (
            <div>
                <div>
                    <svg width={this.props.width} height={this.props.width} viewBox={viewBox} transform = {transform}>
                        {getPaths(this.props.slices, this.props.width)}hello
                    </svg>

                </div>
            </div>
        );
    }
}

function getCoordinatesForPercent(percent) {
    const x = Math.cos(2 * Math.PI * percent);
    const y = Math.sin(2 * Math.PI * percent);
    return [x, y];
}

let cumulativePercent = 0;

const getPaths = (slices, size) => {
    let paths = [];

    slices.forEach(slice => {

        let [startX, startY] = getCoordinatesForPercent(cumulativePercent);

        cumulativePercent += slice.percent;

        const [endX, endY] = getCoordinatesForPercent(cumulativePercent);

        // if the slice is more than 50%, take the large arc (the long way around)
        const largeArcFlag = slice.percent > .5 ? 1 : 0;

        // create an array and join it just for code readability
        const pathData = [
            `M ${startX * size} ${startY * size}`, // Move
            `A ${size} ${size} 0 ${largeArcFlag} 1 ${endX * size} ${endY * size}`, // Arc (size is same as radius)
            `L 0 0`, // Line
        ].join(' ');

 paths.push(<g overflow='hidden'><path d={pathData} stroke={'rgba(0, 0, 0, 1)'} fill={slice.color}/><text x={(Math.random() * 70)} y ={(Math.random() * 120)}> + Test</text></g>)
    });
    return paths;
}

ReactDOM.render(<PieChart slices={slices} width={250}/>, document.querySelector("#app"))