D3.js hierarchyのデータ構造と使い方

hierarchyは階層データを可視化するためのライブラリで、次の5種類の描画を提供する。

• Cluster
• Tree (準備中)
• Treemap (準備中)
• Partition (準備中)
• Pack

各描画はそれぞれのページを参照すればよい。ここではすべてに共通するデータ構造について説明する。

データ構造

まず、1つのノードについて次の形式でデータを用意する。

{
  "name": "A",
  "children": [{ },{ }]
}

子や孫ノードを追加したい場合は、children配列に同じ形式のオブジェクトを追加していく。末端ノードの場合は"children"を省略する。

たとえば、次の構造のツリーを描画しようとする場合、

次のようなデータ構造を用意する必要がある。

var data =
{
    "name": "A",
    "children": [
      { "name": "B" },
      {
        "name": "C",
        "children": [{ "name": "D" }, { "name": "E" }, { "name": "F" }]
      },
      { "name": "G" },
      {
        "name": "H",
        "children": [{ "name": "I" }, { "name": "J" }]
      },
      { "name": "K" }
    ]
  };

データ構造の変換

上で用意したデータで描画するには、データ構造を2回変換する必要がある。

用意した階層データ -> hierarchy用データ構造 -> 描画種類別データ構造

そのためには、どちらも関数を1回呼び出すだけでよい。同じデータ構造を別の描画へ変換できる構造になっている。

まず、hierarchy用のデータ構造への変換には次の関数を使用する。

var root = d3.hierarchy(data);

rootは用意したデータと同じ構造のオブジェクトを作成し、次の変数を追加する。

root変数自体には、先頭のnodeに対応するオブジェクトが含まれている。前の図のような構造であれば、次のようにしてノード"B"のオブジェクトへアクセスできる。

root.children[0]

hierarchyノードの関数一覧

ノードには次のような関数が用意されている。