bugfix> javascript > 投稿

円グラフで各スライスの重心を見つけようとしています。円の中心が原点であると仮定して、各スライスの重心のx座標とy座標を計算するにはどうすればよいですか?

各スライスの半径、開始角度、終了角度があります。

スライスの開始角度が0の場合、スライスの重心を計算する方法を知っています。それは答えたここに。 ただし、これは、スライスの角度アルファが0から始まることを前提としています(JavaScriptは通常、pi/2と考えられる場所であると想定しています)。たとえば、この写真の赤いスライスの重心の座標が必要です。

赤いスライスの角度アルファが1ラジアン(単純化のため、startAngle = 6およびendAngle = 5)であり、これは正確ではなく写真の実際の角度に近いと仮定します。チャートの半径は400pxです。式を使用すると、xbar =(2/3)(r/a)sin(a)=(2/3)(400/1)(。84147)= 224.39226pxになり、これは〜225pxになります正しい この式では、スライスの開始角度が0であると想定されているため、重心の実際のx座標の近くにはありません。

また、開始点が0ではなくpi/2の座標であると、問題の原因になる可能性がありますか?よく分かりません。

重心の実際のx座標を見つけるにはどうすればよいですか?

回答 1 件
  • Ben Westのコメントのおかげで、私は答えを決定することができました。円の中心点を中心に点を回転させる必要があります startAngle  ラジアン。

    JavaScriptを使用する場合、円はpi/2から始まり、sin関数とcos関数のように反時計回りではなく時計回りに回転するため、そのことを考慮する必要があります。

    コード:

    computeCentroid(slice, chart) {
        const startAngle = slice.startAngle - (Math.PI / 2), endAngle = slice.endAngle - (Math.PI / 2);
        const alpha = endAngle - startAngle;
        const radius = chart.radius;
        // get coordinates of centroid if startAngle = 0
        const xbar = (2 / 3) * (radius / alpha) * Math.sin(alpha);
        const ybar = (-2 / 3) * (radius / alpha) * (Math.cos(alpha) - 1);
        // rotate coordinates about (0, 0) by startAngle
        const xCoord = xbar * Math.cos(startAngle) - ybar * Math.sin(startAngle);
        const yCoord = ybar * Math.cos(startAngle) + xbar * Math.sin(startAngle);
        return [xCoord, yCoord];
    }
    
    

あなたの答え