D3.js v4/v5 partition 使い方 – サンプルプログラム

2018-02-11

D3の階層構造を可視化するpartition(d3.partition)のプログラムデモです。

サンプルデモ

上のグラフは下の図と同じ階層構造を表示しています(参考)。表示順は、設定した値に応じてソートされています。
それぞれの高さが設定した値の大きさと一致します。左から、親、子、孫の順に表示されており、階層構造と値の大きさが一目でわかります。

サンプルプログラム

解説

 1. 描画用のデータ準備


描画用のデータを用意します。データ構造の詳細はこちらを参照ください。また、すべての末端ノードに、partitionの大きさを表示するためのvalue値を設定します。

2. 描画用のデータ変換

準備したデータを、描画用のデータ構造に変更します。準備したデータ→hierarchy用のデータ→描画種類ごと(今回はpartition)のデータと2段階の変換が必要です。

上記の関数でdataをhierarchy用のデータ構造rootに変更した後(データ構造詳細はこちらを参照)、value値を設定していないノードに、子孫ノードの合計value値を計算します。さらにpartitionの上側に一番合計値が大きいカテゴリーが来るようにソートしています。ソートしなければ指定したデータ構造に基づいてpartitionが作成されます。

次に、partition用のデータに変更するための関数を呼び出します。

d3.partition()で呼び出した関数にrootを引数として設定すると、次のデータがrootに付与されます。ここで、paritionはxが兄弟の並び方向、yが親、孫の並び方向になるため注意が必要です。

x0 四角形の左端座標
y0 四角形の上端座標
x1 四角形の右端座標
y1 四角形の下端座標

また、d3.parition()には以下の設定が可能です。

parition.size() treemapレイアウト全体のサイズを[並び方向幅, 深さ方向幅]の2要素配列で設定します。引数が設定されていない場合は現在のサイズを返します。デフォルトは[1, 1]。
parition.round() 計算の丸め(四捨五入)を許容するかを指定します。trueもしくはfalseで設定します。デフォルトはfalseです。
parition.padding() 四角形の隙間の幅を設定します。値が設定されていない場合は現在の値を返します。

3 svg要素の配置

svg要素に”g”タグを設定した後、その中に”rect”と”text”を設定していきます。

データの割り当て部分で

の関数を使っていますが、これは入れ子になったrootからすべてのノードを配列として並べてくれる関数です。

また、四角形の背景色として、

のように色を割り当てています。まず、2行目の部分で自分が属するカテゴリーを探索します。d.depth=1は二番目の深さを意味し、d.depth=0は先頭のノードを意味します。今回は先頭のノードのみ”gray”を与えています。d3.schemeCategory10はD3.js v5から追加された配列で0~9の値を与えると、適当な色を返してくれます。今回は2番目の深さの親のvalue値に応じて色を変更する設定にしました。v4以前であれば、下のような関数を作って呼び出してもよいです。

まとめ

treemapとほぼ同じプログラムで描画できます。カテゴリーの重要度と構造を同時に表示することができるグラフです。