パイチャート前回に引き続き今回もd3.jsでのチャートをまとめておく。今回はパイチャートについて。ツールチップSFiddleはこちら弧上に描画するためのarc()とパイ上に配置するためのpie()を用意する。それと配色用のcolor。d3.scale.category10();データをpie()にかませて配置用のデータへと変換する。.append('g');弧を描画する。arc);arc.centroid()を使用すると真ん中の座標が簡単に取得できる。});弧の外側に文字を描画するには三角関数を使用して座標を算出する。text-anchorを角度によって変更している。パイチャートでは90度(Math.PI/2)の位置が0度計算になっているので注意。それなのでxは-する。Japanウェブアプリ、デスクトップアプリ、モバイルアプリ、ゲームなどを開発しています。