d3.js advent calendar 19日目

d3 advent calendar 19日目
d3.layout.hierarchy

d3.layout.hierarchy

このlayoutは直接利用するものではなく、d3.layout.treeなど階層構造を表現するためのベースlayoutです。

今日はこのlayoutのAPIにふれて、次回で具体的なlayoutであるtreeの使い方を説明します。

概要

このlayout(およびその拡張)は、2つのメインのメソッド.nodes().links()を提供しています。

.nodes()は、「名前と子要素を持つハッシュ」を「位置や角度、サイズといったトポロジ情報を持つオブジェクト」であるnodeの配列に変換します

.links()は、nodeの配列から「sourcetargetとして関係する2つのnode情報を持つオブジェクト」に変換します

layout.hierarchyはこれら2つの配列を描画側のメソッドに引き渡すことで、データ構造を可視化します

API

  • .sort: nodeの並び順を操作する
  • .children: 配列の「子要素」を指すフィールドを指定する。デフォルトではchildrenが使われる
  • .nodes: 前述のとおり
  • .links: 前述のとおり
  • .value: nodeに対してvalueという値をセットする関数を定義します (面積とか,スコアとか)
  • .revalue: nodeのvalueを再計算します。

.nodes / .links

  • .nodes()は、サイズを元にした位置の情報(layoutにより異なります、例えば、xやy)をセットし、また、parent nodeをセットします
  • このparentと自身の情報を元にして、.links()は2つのnode(source, target)の間の情報を計算します

実際のトポロジへの変換

hierarchyを拡張した、treemapやpack、clusterはそれぞれ.nodes().links()で計算されるノードの位置・大きさ、ノードを結ぶリンクの表現方法(例えば、pathの軌跡など)を実装することになります。

  • cluster: ノードはcircleで、リンクはpathで
  • pack: ノードはcircleで、リンクは表現しない
  • tree: ノードはcircleで、リンクはpathで
  • treemap: ノードはrectで、リンクは表現しない
  • partition: ノードはpath(弧)で、リンクは表現しない