スポンサーリンク
スポンサーリンク

ツリーマップを表示する

ツリーマップレイアウトは階層(親子)関係を利用してチャートを表示します。以前の記事で出てきたパックレイアウトと同じ仕組みです。ということは、ツリーマップレイアウトも階層化レイアウト機能の一種として用意されています。基本的な作りは変わらないので、パックレイアウトが分かれば、分かりやすいかと思います。

ツリーマップレイアウト生成の基本

ツリーマップレイアウトの生成には、階層化されたJavaScriptオブジェクトが必要です。ツリーマップレイアウトで最低限必要なので親となる(ルートとなるデータ)です。パックレイアウトと同じです。

valueはツリーマップレイアウトでデフォルトで使われているプロパティ名です。子ノードがある時は、childrenプロパティを使い配列でデータを指定します。下記のような感じです。

children配列内にchildrenを使い、入れ子にすることもできます。

ツリーマップレイアウトを利用するには、d3.layout.treemap()メソッドを使います。ツリーマップレイアウトはパックレイアウトと同様に、表示する範囲をsize()メソッドを用いて指定します。size()メソッドのパラメーターには配列形式で幅、高さを指定します。
あとはsvg要素に対してrect要素を追加していき、データをセットするdata()メソッドには、下記のようにしてnodes()メソッドを使う。

上記のように書くと、D3.jsでは内部で計算が行われ、以下のプロパティが計算されます。

プロパティ名 詳細
parent 親階層のノード。ルート(一番上の階層)の場合はnull
children 子ノード。ない場合はnull
value
depth 階層の深さ、ルートの場合は0
x 四角形のX座標
y 四角形のY座標
dx 横のオフセット
dy 縦のオフセット

attr()メソッドを使い要素に値を設定する場合は、上記の表のプロパティから読み出します。

サンプルコードの実行結果はこちら

分割された空間にデータの値を表示する

ツリーマップレイアウトは値に応じて領域を自動的に分割します。分割された領域にデータの値を出力します。データの値はvalueプロパティに入ってますが、そのまま文字として出力すると入れ子の構造のときに、文字が重なる現象が起きます。なので以下のように書いて、ルート階層のときと、子ノードがあるときは出力処理を回避します。

データの階層構造の違いを見た目で表す

データが入れ子になっているとき、下記を書くと階層が深くなるほど背景色が濃くなります。

上記2つ踏まえたものは下記の実行結果です。
サンプルコードの実行結果はこちら

コメント

タイトルとURLをコピーしました