このパイチャートでSVGパスが間違って描画されるのはなぜですか？

Question

私はRailsアプリケーションでSVG piechartを作成しようとしています。私はほとんどの時間で動作するメソッドを書いたことがありますが、時には奇妙な結果を生じることがあります。

このチャートは、1つのセグメントを除き、正しく構築されています！

セグメントは

<path d='M0,0 L99.99949084376563,0.3191096796332688 A100,100 0 **0,0** 99.99893303088741,0.46194445996738664 Z' fill='#136F7F' /> 

であると私は問題の原因は、私は**に包まれてきた値であってもよいと思うことを作成するSVGコード（星は実際のコードには存在しません！）。

次の方法でチャートを作成しています。ここでは、キー値ペアのハッシュとしてdataを指定しています。

svg = "<svg viewBox='-100 -100 200 200'>" 
data.each do |d| 
svg += "<path d='M0,0 L#{previous_x},#{previous_y} A100,100 0 #{x <= 0 ? 1 : 0},#{y <= 0 ? 1 : 0} #{x},#{y} Z' fill='#{col[i]}' fill-opacity='1' />" 
end 
svg += "</svg>" 

xとyは100

乗じ、ラジアンセグメントの角度の余弦および正弦いる私は正しいlarge-arc-flagとsweep-flag値を設定し、これらはに時々セグメントを引き起こしているものであるアム失敗します？

Answer 1

2点を結ぶ円弧には4つの解決策があります。ブルーアークが小さな青いアーチが緑色の円の中心

大周りに反時計回りに描かれている反時計回り、時計回りグリーンアーク（スイープフラグ）

に描かれ

• 次の画像に 青いアーチは、青い丸の中心の周りに反時計回りに描かれている。
• 小さな緑色アーチが大きい緑色アーチが 暗いアークが小さい円弧である緑色の円の中心の周りcclockwiseに描かれ
• 青色の円の中心の周りに時計方向に描かれ、ライターアークは大きな弧は（大きいです-arcフラグ）

どのアークをレンダリングするかを指示するには、大きな円弧と掃引フラグの組み合わせを使用します。スイープフラグを使用すると、投稿セグメントは、セグメントに等しくない方向（時計回り、反時計回り）に大きなアークフラグのサイズ（大アーチ、小円弧）deteremines

<svg width="200" height="200" viewBox="-150 -250 400 400"> 
 

 

 
    <g fill="none" stroke="black" stroke-width="5"> 
 
    <path d="M25.88 -96.59 A100 100 0 0 0 96.59 -25.88" stroke="darkblue" /> 
 
    <path d="M25.88 -96.59 A100 100 0 1 0 96.59 -25.88" stroke="lightblue" /> 
 
    <path d="M25.88 -96.59 A100 100 0 0 1 96.59 -25.88" stroke="darkgreen" /> 
 
    <path d="M25.88 -96.59 A100 100 0 1 1 96.59 -25.88" stroke="lime" /> 
 
    </g> 
 
    <g fill="red" stroke="red"> 
 
    <circle cx="25.88" cy="-96.59" r="5" /> 
 
    <circle cx="96.59" cy="-25.88" r="5" /> 
 
    </g> 
 
</svg> 
 
<br/> 
 
<ul> 
 
    <li> 
 
    the blue arcs are drawn counter clockwise, the green arcs clockwise (sweep flag) 
 
    </li> 
 
    <li> 
 
    the small blue arch is drawn counter clockwise around the center of the green circle 
 
    </li> 
 
    <li> 
 
    the large blue arch is drawn counter clockwise around the center of the bleu circle. 
 
    </li> 
 
    <li> 
 
    the small green arch is drawn clockwise around the center of the blue circle 
 
    </li> 
 
    <li> 
 
    the large green arch is drawn cclockwise around the center of the green circle 
 
    </li> 
 
    <li>the darker arcs are small arcs, the lighter arcs are large arcs (large-arc flag)</li> 
 
</ul>