D3 - Tree (Hierarchy)

1 - About

The tree representation in D3

A tree will be passed to a hierarchical layout such as:

You must call the function node.sum or node.count before invoking a hierarchical layout that requires node.value, such as d3.treemap.

See also Nest

3 - Initialisation

3.1 - JSON

d3.hierarchy. See example

d3.hierarchy(data[, childrenFunction])

Default children accessor:

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

3.2 - CSV

4 - Library

5 - Properties

A tree have the following properties:

  • a children property. An array of nodes of undefined for the leaves
  • a depth property (0 for the root to N for the leaves)
  • a height property which is the inverse of the depth property (N for the root to 0 for the leaves)
  • a id property: the identifier for the node. For leaf nodes, the id may be undefined; otherwise, the id must be unique.
  • a parent property. The parent node, or null for the root node.
  • a data property : the associated data
  • a value property representing the summed value of the node and its descendants (This property can be computed with the sum function. See sum and count).

Null and the empty string are equivalent to undefined.

6 - Operations

6.1 - Visitor

  • node.sum(value): Evaluates the specified value function for this node and each descendant in post-order traversal, and returns this node
  • node.count(): Computes the number of leaves under this node and assigns it to node.value, and similarly for every descendant of node. If this node is a leaf, its count is one. Returns this node.
  • node.sort(compare): Sorts the children of this node, if any, and each of this node’s descendants’ children, in pre-order traversal using the specified compare function, and returns this node.

6.2 - Accessors

  • node.ancestors(): Returns the array of ancestors nodes, starting with this node, then followed by each parent up to the root.
  • node.descendants() : Returns the array of descendant nodes, starting with this node, then followed by each child in topological order.
  • node.leaves(): Returns the array of leaf nodes in traversal order; leaves are nodes with no children.
  • node.links() : Returns an array of links for this node, where each link is an object that defines source and target properties. The source of each link is the parent node, and the target is a child node.

6.3 - Traversal

  • node.each(function) Invokes the specified function for node and each descendant in breadth-first order,
  • node.eachAfter(function) Invokes the specified function for node and each descendant in post-order traversal, such that a given node is only visited after all of its descendants have already been visited. The specified function is passed the current node.
  • node.eachBefore(function): Invokes the specified function for node and each descendant in pre-order traversal, such that a given node is only visited after all of its ancestors have already been visited. The specified function is passed the current node.

6.4 - Others

  • node.path(target): Returns the shortest path through the hierarchy from this node to the specified target node.
  • node.copy(): Return a deep copy of the subtree starting at this node. (The returned deep copy shares the same data, however.) The returned node is the root of a new tree; the returned node’s parent is always null and its depth is always zero.

7 - Example

data = {
  "name": "0",
  "children": [
    {
      "name": "1"
    },
    {
      "name": "2",
      "children": [
        {
          "name": "21"
        },
        {
          "name": "22"
        }
      ]
    },
    {
      "name": "3"
    },
    {
      "name": "4",
      "children": [
        {
          "name": "41"
        }
      ]
    },
    {
      "name": "5"
    }
  ]
}
tree = d3.hierarchy(data);
 
tree.count();
console.log("The leaf count is "+tree.value);
console.log("The leaves are: "+tree.leaves().map( d => d.data.name ));
 
tree.sum(function(d){ return d.name.length; });
console.log("The sum of all letters in the name is "+tree.value);
console.log("The descendants are: "+tree.descendants().map( d => d.data.name ));
 
var nodes = [];
tree.each( d => nodes.push(d.data.name) )
console.log("The Each function has visited the tree in this order: "+nodes);
var nodes = [];
tree.eachAfter( d => nodes.push(d.data.name) )
console.log("The eachAfter function has visited the tree in this order: "+nodes);
var nodes = [];
tree.eachBefore( d => nodes.push(d.data.name) )
console.log("The eachBefore function has visited the tree in this order: "+nodes);
 
console.log("The links are:");
console.log(tree.links().map( d => "Source:"+d.source.data.name+", Target: "+d.target.data.name));

8 - Documentation / Reference

viz/d3/tree.txt · Last modified: 2018/03/28 22:16 by gerardnico