D3.js v4/v5 インタラクティブなサンバースト図の作り方

2018-03-11

D3によるサンバースト(sun burst)図で、クリック/タッチにより対象部分をズームする方法を紹介します。

サンプルデモ – 外側をクリック/タッチしてください(CかHがおススメ)。真ん中を再びクリック/タッチすると元に戻ります。

サンプルプログフラム

解説

基本的なサンバースト図の作り方は、こちらを参照ください。

1. 描画用のデータ準備

インタラクティブな動作に必要な、デフォルト時の真ん中の円の半径と、元に戻す用の中心円の半径を変数として準備します。

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

描画時のスケール変換関数を設定しておきます。クリック時にスケール変換関数を変更することでグラフを変化させます。

4. 描画用のデータ変換

partitionへのデータ変換時に.sizeを設定せず、デフォルトで0~1の範囲で定義されるようにします。

5. SVG要素の設定

サイズ変更に対応できるように、path要素の”d”属性を算出する関数を設定します。

startAngle、endAngleは0~2πの値に収まるようにし、範囲外のものはstartAngleとendAngleが0,0もしくは2π,2πとなり、見えなくなるように設定します。同様にinnerRadius、outerRadiusも0以下の半径のものはinnerRadius、outerRadiusともに0となるように設定し、見えなくします。
SVG要素の追加はサンバースト図の基本的な設定と同じです。クリックしたときのイベント関数をonメソッドで追加します。

6.クリック時のイベント関数

クリックした際のイベント関数を設定します。

まず、transition().duration(500)は、500ミリ秒かけて徐々に属性を線形に変化させるメソッドです。今回は”d”属性を時間経過とともに複雑に変える必要がありますのでtweenメソッドを用います。tweenでは時刻tが0.0から1.0まで変化するときの状態を設定する関数を返り値として設定します。設定後、attrTweenメソッドを使って時間変化する属性を割り当てます。

d3.interpolateは第一引数と第二引数を補完する関数を設定するもので、設定した関数の引数に0.0から1.0を設定すると中間の値を返してくれます。d3.interpolateを使って 描画用スケールのxScaleとrScaleの設定を変更します。

では、現在のxScaleの値の入力範囲を、クリックした要素の範囲に変更します。つまり、クリックした要素の角度範囲が表示上の0~2πの範囲になり、それ以外のものは見えなくなります。
同様に、

ではクリックした要素の内側の半径を最小値に設定し

では、d.y0が0以外の場合(Aがクリックされていない場合)は、内側の半径がbackCircleRadius、Aがクリックされた場合はcenterRadiusとなるように制御します。

tweenメソッドにより、時間経過とともに描画用スケールが変更されますので、その時刻のスケールに合わせた”d”属性をattrTweenメソッドを使って割り当てます。

テキストも同様ですが、こちらは表示範囲から外れたものを”opacity”属性と”font”属性を変えることで見えなくします。

まとめ

サンバースト図は、D3.jsの解説本の表紙にもなっており、D3らしい表現です。また、普通の円グラフと比べて多くの情報が表示できるうえに見やすく、実用性もかなり高いです。基本的なサンバースト図についてはこちらを参照ください。