About
tree operation in D3 are done in the hierarchy module.
A tree will be passed to a hierarchical layout such as D3 - Treemap Layout
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
Articles Related
Initialisation
JSON
d3.hierarchy. See example
d3.hierarchy(data[, childrenFunction])
Default children accessor:
function children(d) {
return d.children;
}
CSV
from csv, see D3 - Stratify (From CSV to tree)
Library
- Standalone: https://d3js.org/d3-hierarchy.v1.min.js
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
Null and the empty string are equivalent to undefined.
Operations
See d3/d3-hierarchy
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.
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.
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.
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.
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));