D3.js v4/v5の使い方 円グラフ(pie chart)の作成

2018-03-01

D3で基本チャートの円グラフの作り方を紹介します。

サンプルデモ

サンプルプログラム

解説

1. データの準備

円グラフ描画用のデータを準備します。javascriptの標準関数 Math.minを使って円グラフの半径を設定しておきます。

2. SVG領域の設定

円グラフを表示するSVG表示領域を設定します。円グラフはデフォルトでは原点が0,0点に描かれるため、画面の中央に移動します。

“g”要素を設定し、その中に円グラフのSVG要素を設定していきます。

3. カラーの設定

円グラフを塗り分けるカラースケールをD3のメソッドd3.scaleOrdinalを使って設定します。

d3.scaleOrdinalはrangeで設定した配列を繰り返し呼び出す関数を設定します。今回は5色の色を呼び出す関数をcolorに設定して使います。

4. pieチャートデータセット用関数の設定

用意したデータdatasetをpieチャート用のデータに変換する関数を、D3のメソッドd3.pieを使って設定します。

データセットを設定した関数に代入すると(pie(dataset))、変換されたデータが出力されます。
.valueで各円グラフの大きさを決める値を設定します。.sort(null)で順番を並び替えない設定をしています。.sort()は省略可能で、省略すると値が大きい順に並び替えられます。
変換後のデータは次の値が設定されたオブジェクトの配列となります。

data 元データへの参照
value 円グラフ要素の値
index 円グラフ要素のインデックス(※ソート後並び替えられない)
startAngle 円弧の開始角度
endAngle 円弧の終了角度
padAngle 要素間の隙間の角度

5. pieチャートSVG要素の設定

設定した関数pieを使ってデータを設定します。

はじめに”g”要素を設定し、その中に円グラフの扇(“path”要素)と文字列(“text”要素)を設定します。

円グラフの扇”path”要素の”d”属性を設定するための関数を、D3のメソッドd3.arcを使って設定します。

d3.arcは.outerRadiusで外側の半径を.innerRadiusで内側の半径を設定します。.innerRadiusに0以外の値、例えば

とすると、ドーナツチャートを作成することができます。

6. pieチャートテキストSVG要素の設定

ラベル用のテキストを設定します。

テキストの配置のためにd3.arcを再び呼び出してtextにメソッドを設定しています。.centroidメソッドにpieチャート用に変換したデータを挿入すると、パイチャートの半径方向の中央位置にテキストが設定できます。扇の.innerRadiusを0としたためテキストを中央より少し外側に設置したく、新たにメソッドを呼び出しています。先ほどのドーナツチャートの場合は中央位置にテキストを配置したほうが見栄えがよいので、テキスト配置のためにd3.arcを呼び出す必要はなく、text.centroid(d)の部分をarc.centroid(d)とすれば、先ほどのサンプルのように中央配置できます。

まとめ

棒グラフと同じデータ構造で円グラフを作成することができます。tooltipも棒グラフと同様にCSSで設定できます(詳細はこちら)。また、円グラフの応用としてサンバースト図があります。複数の階層構造をきれいに可視化できます。