D3.js v5 入門|#7 円グラフを表示する

d3.js(v5) で円グラフ表示する方法について記載します。
実装すると、次のような円グラフが表示できます。

Demoを表示

1.全体のコード

2.コードの詳細( HTML )

グラフを表示する場所を定義します。

3.コードの詳細( JavaScript )

3−1.円グラフの内側・外側半径の設定

内側半径(innerRadius)、外側半径(outerRadius) を設定しています。
内側半径を大きくしていくと、ドーナッツ型の円グラフを作成することもできます。

3−2.円グラフのラベル表示位置を設定

円グラフ上に表示するラベルの表示位置を計算、設定しています。
Math.min(width, height) / 2 で半径を計算し、そこに任意の値(0.57)を掛けて表示位置を計算しています。
グラフに合わせて調整する項目になります。

3−3.各データごとの角度を計算

各要素の値(value)から必要になる角度を計算します
sortにnullを指定しているのは、デフォルトでvalueの降順でソートされるためです。
nullを指定することにより、data配列の順番で表示されるようにしています。

3−4.g要素に各データのpath要素を追加

各データごとにpath要素を作成します。
ここでは、円グラフを描画するためのデータ(arcs)や各要素の色(fill)などを指定します。

3−5.text要素にデータ名を設定(dataのvalueを設定)

textの設定では、全体のコード通りなのですが1つポイントがあります。
以下のように、text.filter としているのは、値が小さいデータにはテキストを表示しないようにするためです。

値が小さいデータは、円グラフ上のスペースが狭いので、テキストを表示してしまうと他のデータに被ってしまうため、ここでは閾値(.7535より大きい)を指定して、テキストの表示・非表示を行っています。

DemoのDとEのデータには、テキストが表示されていないのはこのためです。
.7535と指定している閾値ですが、大体以下の値で指定できます。

データが全体の50%以上の場合に、テキストを表示する
d => (d.endAngle – d.startAngle) > 3.14

データが全体の25%以上の場合に、テキストを表示する
d => (d.endAngle – d.startAngle) > 1.57

4.まとめ

d3.jsを使用して円グラフを作成しました。
テキストの表示は、使用するデータにより閾値を調整する必要がありますが、簡単に円グラフを作成できると思います。