Tweet about this on TwitterShare on FacebookShare on Google+

 

今回は、PieChartを書いてみました。
これを参考に、少し動きを付けてみることに。

151031

サンプルはこちら

まずは、svgの描写範囲と、外円の半径と内円の半径をまとめて指定しておきます。svgの領域を設定して、transformで、グラフが描写範囲の真ん中に来るようにしてます。

arc()は、D3で用意された関数です。ここに指定した半径を入れていきます。innerRadiusを大きくすると、ドーナツ型のグラフになりますね。

ここでjsonの読み込みです。
ちなみにjsonの中身は、こんな感じ。

jsonを読み込んでから、データの中身のvalueを指定してあげます。

ここからが描写の記述です。
パスとテキストをまとめて処理するために、グループを作っておきます。

パスは、jsonの中で書いているカラーを読み込みます。
そして、transitionで、動きを付けてみました。1秒間で、0°から360°まで動くようにしています。

テキストは、真ん中に来るようにtext-anchorで指定してあげるのがポイントのようです。

 

以上!

こんな感じのチャートが表現できると、応用が効きそうだな。