D3.js v4/v5 サンバースト図の作り方

2018-03-10

D3によるサンバースト(sun burst)図の作り方を紹介します。

サンプルデモ

サンプルプログフラム

解説

サンバースト図は、partition円グラフの組み合わせで作成します。それぞれの詳細はリンク先を参照ください。

1. 描画用のデータ準備

サンバースト用のデータ構造は、hierarchy用のデータ構造と同様に設定します。

2. SVG表示用要素の設定

SVGを表示するための”svg”要素を”body”内に設定します。また、サンバースト図の中心座標が(0,0)になるため、描画領域の中心に”g”要素を設定しその中にサンバースト図の要素を設定していきます。

3. 描画用スケールの設定

色分けのためのカラースケールを設定します。カラースケールの作り方はこちらを参照ください。

また、中心を空洞にして半径方向の方向の位置を調整するためのスケールを設定します。

d3.scaleLinear()は.domainで設定したレンジを.rangeで設定したレンジに変更する関数をrScaleに設定するものです。

4. 描画用のデータ変換

用意したデータをd3.hierarchy()とd3.partition()を使って階層構造用データ、partition用データと変換します。この時、partitionのサイズを[角度最大値、半径最大値]としておくことで円グラフに変換できるようにします。

5. SVG要素の設定

円グラフと同様に、SVGの”pash”要素の”d”属性を算出するメソッドを呼び出します。

SVGの”path”要素を使ってサンバースト図を表示します。”fill”属性は2番目の深さの親を探索して親の値に応じて色を切り替える設定にしています。

root.descendants()は、入れ子に階層構造のrootから要素を取り出して配列とするものです。
サンバースト図上位テキストのラベルを設定します。

arc.centroid()は円グラフのパイの中心座標を算出するメソッドです。

まとめ

サンバースト図は、D3.jsの解説本の表紙にもなっているものです。インパクトのあるビジュアルを作成できます。クリック部分を拡大する操作も可能です。こちらを参照ください。