2013-03-30 d3.js advent calendar 19日目 d3 javascript adventcalendar 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の配列から「sourceとtargetとして関係する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(弧)で、リンクは表現しない « d3.js advent calendar 20日目 時系列解析と異常値検知の会(仮) »