Trees and TreeLayout

There is no limit to the kinds of graphs that you can build in GoJS. But the most common kind of graph forms a "tree". A tree is a graph where each node may have at most one "tree parent" and at most one link connecting to that parent node, and where there are no cycles within the graph.

Because trees occur so frequently in diagrams, there is also a predefined tree layout that offers many customizations specifically for trees.

Manual layout of a tree structure

You can of course position the nodes manually, either by hand or programmatically. In this first example, the node locations are stored in the node data, and there is a Binding of Part.location to the node data property.

You can also get the same results by using a TreeModel. Note how the node template and the link template are exactly the same as when using a GraphLinksModel, above.

Automatic TreeLayout

It is most common to use TreeLayout for laying out trees. Just assign Diagram.layout to an instance of TreeLayout.

Common TreeLayout properties

The TreeLayout.angle property controls the general direction of tree growth. This must be zero (towards the right), 90 (downward), 180 (leftward), or 270 (upward).

The TreeLayout.alignment property controls how the parent node is positioned relative to its children. This must be one of the Alignment... constants defined on TreeLayout.

For tree layouts, all of the nodes are placed into "layers" according to the length of the chain of links from the root node. These layers are not to be confused with Diagram Layers, which control the Z-ordering of the nodes. The TreeLayout.layerSpacing property controls how close the layers are to each other. The TreeLayout.nodeSpacing property controls how close nodes are to each other in the same layer.

The children of each node can be sorted. By default the TreeLayout.comparer function compares the Part.text property. So if that property is data bound by the node template, and if you set the TreeLayout.sorting property to sort in either ascending or descending order, each parent node will have all of its children sorted in that order by their text strings. (In this example that means alphabetical ordering of the English names of the letters of the Greek alphabet.)

But you can provide your own function for ordering the children, such as: