# Tree ​

Examples · The tree layout produces tidy node-link diagrams of trees using the Reingold–Tilford “tidy” algorithm, improved to run in linear time by Buchheim et al. Tidy trees are typically more compact than dendrograms.

## tree() ​

Source · Creates a new tree layout with default settings.

## tree(root) ​

Source · Lays out the specified root hierarchy, assigning the following properties on root and its descendants:

• node.x - the x-coordinate of the node
• node.y - the y coordinate of the node

The coordinates x and y represent an arbitrary coordinate system; for example, you can treat x as an angle and y as a radius to produce a radial layout. You may want to call root.sort before passing the hierarchy to the tree layout.

## tree.size(size) ​

Source · If size is specified, sets this tree layout’s size to the specified two-element array of numbers [width, height] and returns this tree layout. If size is not specified, returns the current layout size, which defaults to [1, 1]. A layout size of null indicates that a node size will be used instead. The coordinates x and y represent an arbitrary coordinate system; for example, to produce a radial layout, a size of [360, radius] corresponds to a breadth of 360° and a depth of radius.

## tree.nodeSize(size) ​

Source · If size is specified, sets this tree layout’s node size to the specified two-element array of numbers [width, height] and returns this tree layout. If size is not specified, returns the current node size, which defaults to null. A node size of null indicates that a layout size will be used instead. When a node size is specified, the root node is always positioned at ⟨0, 0⟩.

## tree.separation(separation) ​

Source · If separation is specified, sets the separation accessor to the specified function and returns this tree layout. If separation is not specified, returns the current separation accessor, which defaults to:

js
``````function separation(a, b) {
return a.parent == b.parent ? 1 : 2;
}``````

A variation that is more appropriate for radial layouts reduces the separation gap proportionally to the radius:

js
``````function separation(a, b) {
return (a.parent == b.parent ? 1 : 2) / a.depth;
}``````

The separation accessor is used to separate neighboring nodes. The separation function is passed two nodes a and b, and must return the desired separation. The nodes are typically siblings, though the nodes may be more distantly related if the layout decides to place such nodes adjacent.

Resources
Observable