D3.js v5 入門|#8 円グラフ(ドーナッツ型)を表示する

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

Demoを表示

1.全体のコード

2.コードの詳細( HTML )

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

3.コードの詳細( JavaScript )

基本的なコードは、前回の円グラフと同じです。

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

内側半径(innerRadius)の値を調整してドーナッツ型の円グラフを描画します。
今回は、内側半径に直径の1/4の値を指定しました。

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

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

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を使用して円グラフ(ドーナッツ)を作成しました。
作成方法は、円グラフとほとんど同じなので簡単に作成することができます。