Hierarchy Layout - InfographicsJa/d3 GitHub Wiki

Wiki ▸ API Reference ▸ Layouts ▸ Hierarchy Layout

階層 layout は、直接利用しませんが、複数の階層的 layout の間で共有されている abstract な layout です。実装は下記のそれぞれを参照ください。

• Cluster - エンティティを樹形図へとクラスタ化します。
• Pack - 再帰的な円充足を用いた階層的 layout を生成します。
• Partition - node tree を 放射状または氷柱状に再帰的に区分します。
• Tree - node tree を整然と並べます。
• Treemap - node tree を再帰的に空間区分して表現します。

階層 layout だけではなく、 bundle layout もまた階層性を含む結合させるために設計されています。

# d3.layout.hierarchy()

デフォルトの設定をもつ新しい階層的 layout を作成します。デフォルトの sort order は降順、デフォルトの data アクセサは入力データが数値の value 属性を持つオブジェクトであることを想定しており、デフォルトの children アクセサは入力データが children 配列を持つオブジェクトであることを想定しています。

# hierarchy.sort([comparator])

もし、 comparator が指定されていれば、 隣接する node の並び順を layout 決めるために使う comparator 関数をセットします。もし、 comparator が指定されていなければ、現在のグループでの並び替え順序を返します。この順序は、デフォルトでは、関連した入力データの数値 value 属性によって降順に順序付けされます。

function comparator(a, b) {
  return b.value - a.value;
}

The comparator function is invoked for pairs of nodes, being passed the input data for each node. A null comparator disables sorting and uses tree traversal order. Comparator functions may also be implemented using d3.ascending or d3.descending.

# hierarchy.children([accessor])

If accessor is specified, sets the specified children accessor function. If accessor is not specified, returns the current children accessor function, which by default assumes that the input data is an object with a children array:

function children(d) {
  return d.children;
}

Often, it is convenient to load the node hierarchy using d3.json, and represent the input hierarchy as a nested JSON object. For example:

{
 "name": "flare",
 "children": [
  {
   "name": "analytics",
   "children": [
    {
     "name": "cluster",
     "children": [
      {"name": "AgglomerativeCluster", "size": 3938},
      {"name": "CommunityStructure", "size": 3812},
      {"name": "MergeEdge", "size": 743}
     ]
    },
    {
     "name": "graph",
     "children": [
      {"name": "BetweennessCentrality", "size": 3534},
      {"name": "LinkDistance", "size": 5731}
     ]
    }
   ]
  }
 ]
}

The children accessor is first invoked for root node in the hierarchy. If the accessor returns null, then the node is assumed to be a leaf node at the layout traversal terminates. Otherwise, the accessor should return an array of data elements representing the child nodes.

# hierarchy.nodes(root)

Runs the hierarchy layout, returning the array of nodes associated with the specified root node. The input argument to the layout is the root node of the hierarchy, and the output return value is an array representing the computed positions of all nodes. Several attributes are populated on each node:

• parent - the parent node, or null for the root.
• children - the array of child nodes, or null for leaf nodes.
• value - the node value, as returned by the value accessor.
• depth - the depth of the node, starting at 0 for the root.

In addition, most hierarchy layouts also compute x and y positions for nodes; see the implementing class for details.

# hierarchy.links(nodes)

Given the specified array of nodes, such as those returned nodes, returns an array of objects representing the links from parent to child for each node. Leaf nodes will not have any links. Each link is an object with two attributes:

• source - the parent node (as described above).
• target - the child node.

This method is useful for retrieving a set of link descriptions suitable for display, often in conjunction with the diagonal shape generator. For example:

svg.selectAll("path")
    .data(partition.links(nodes))
  .enter().append("path")
    .attr("d", d3.svg.diagonal());

# hierarchy.value([value])

If value is specified, sets the value accessor to the specified function. If value is not specified, returns the current value accessor. The default accessor assumes that the input data is an object with a numeric value attribute:

function value(d) {
  return d.value;
}

The value accessor is invoked for each input data element, and must return a number representing the numeric value of the node. This value is used to set the area of each node proportionally to the value.

# hierarchy.revalue(root)

Re-evaluates the values of each node in the specified tree starting at root, without re-sorting or recomputing the child nodes. This method can be used to recompute the values of each node without making any structural changes to the hierarchy. Primarily, it exists to support sticky treemaps.