Как найти координаты XY для создания меток на графике ap ie (ReactJS)

Question

Мне нужна помощь, чтобы преодолеть финишную линию sh. Я создаю диаграмму ap ie с нуля, так как нам запрещено использовать какие-либо библиотеки. Я приступил к созданию диаграммы, однако не могу понять, как получить правильные координаты X и Y для метки. Я уверен, что есть некоторые расчеты, но я не могу найти правильный.

У меня есть jsFiddle, на котором есть мой код, в настоящее время я рандомизировал координаты X и Y, чтобы отобразить Test где угодно. Я хотел бы знать, как добавить его к правильному обозначению.

https://jsfiddle.net/v9ex8zwh/

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"))

Answer 1

Вы можете использовать событие мыши, чтобы узнать.

a PO C:

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 {
  margin: 20px auto 0 auto;
  height: 100px;
  width: 100px;
  background: red;
  border-radius: 50%;
}

<div class="circ"></div>

<div class="x"></div>
<div class="y"></div>