D3.js v4/v5 pack 使い方

2018-02-10

D3の階層構造を可視化するpack(d3.hieararchy)のプログラムデモです(v4/v5対応)。

サンプルデモ

サンプルプログラム

解説

1. 描画用データの準備

描画用のデータを用意します。データ構造の詳細はこちらを参照ください。また、すべての末端ノードに、バルーンの大きさを表示するためのvalue値を設定します。親ノードのサイズは子、孫ノードのvalue値の合計値を次のデータ変換時に設定します。

2. 描画用のデータ変換

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

上記の関数でdataをhierarchy用のデータ構造rootに変更した後(データ構造詳細はこちらを参照)、value値を設定していないノードに、子孫ノードの合計value値を計算します。

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

d3.pack()で呼び出した関数にrootを引数として設定すると、次のデータがrootに付与されます。

x サークルの中心x座標
y サークルの中心y座標
r サークルの半径

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

pack.radius() サークルの半径を引数にfunction(d){return d.value;}などとした関数で指定します。デフォルトはnullです。
pack.size() packレイアウト全体のサイズを[幅, 高さ]の2要素配列で設定します。引数が設定されていない場合は現在のサイズを返します。デフォルトは[1, 1]。
pack.padding() サークルの接線間の距離を指定します。デフォルトは0です。

3. svg要素の配置

サークル用のsvg要素を設定します。はじめに”g”要素を設定し、その中に”circle”と”text”を設定していきます。

データの割り当ての部分で

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

“circle”では初めにカラー配列を設定し、”fill”の属性として深さ方向の位置に応じた色を設定しています。また、”text”で設定している”text-anchor”はtextの位置を設定するスタイルです。

まとめ

あまりお目にかからないチャートですが、インパクトのある階層構造の描画に用いることができます。末端要素の大きさ(半径)以外は数値で規定されないため、使い方には注意が必要です。