documentationfor yFiles for HTML 2.6

TreeLayout

This layout algorithm arranges graphs with a tree structure.

Inheritance Hierarchy
Implemented Interfaces

Remarks

Layout Style

TreeLayout provides multiple different arrangements of trees and subtrees. It is easy to customize the order of edges, the port assignment and the arrangement of the nodes for each subtree.

Tree layout algorithms are commonly applied to visualize relational data and produce diagrams of high quality that are able to reveal possible hierarchic properties of the graph. More precisely, they find applications in dataflow analysis, software engineering, bioinformatics and business administration.

Example graph with a layout calculated by TreeLayout using default settings

Tree layout using different ITreeLayoutNodePlacers and rotations

Concept

The layout algorithm starts from the leaves and continues with their parents, then with the parents of the parents and so on. When a node is processed, the algorithm will use the corresponding ITreeLayoutNodePlacer instance to move its children (along with their subtrees) to a suitable position and to route the outgoing edges of this node. Then, the next local root node will be processed.

To avoid moving all nodes several times and to know the area that the subtrees occupy, the layout algorithm uses SubtreeShapes. These SubtreeShapes are moved and merged during layout calculation.

Features

Each subtree can have a different style of node placement. ITreeLayoutNodePlacers are responsible for arranging subtrees and their common root node. They can be specified separately for each local root with a IDataProvider registered with the graph using key NODE_PLACER_DP_KEY.

A custom node can be defined as root of the tree using a IDataProvider registered with the graph with key SELECTED_ROOT_DP_KEY.

The layout algorithm can be configured to reserve space for node labels and place the edge labels along edges such that the labels won't overlap with other graph elements. Edge labels are placed according to the information stored in a PreferredPlacementDescriptor instance. However, the placement along the edge will only affect the order of multiple labels at the same edge. The algorithm will always place the labels close to the target node.

Grouping of nodes can also be handled by this layout algorithm. It is important that a group node contains a whole subtree. Otherwise, the group nodes may overlap with each other or with other nodes. Furthermore, the user may specify minimum size constraints for each group node using IDataProvider key MINIMUM_NODE_SIZE_DP_KEY.

TreeLayout supports custom sorting of the outgoing edges of a node. For example, a ITreeLayoutNodePlacer instance that implements IFromSketchNodePlacer provides a comparator that keeps the current order of siblings, allowing to extend the graph incrementally.

Node types are considered such that the type of the nodes is used as a criterion for sorting the child nodes of a local root node, with the effect that nodes of the same type are placed consecutively, if possible. The primary ordering criterion is still specified by the defaultOutEdgeComparer.

This layout algorithm can only handle graphs with a tree structure. To apply it to a general graph, a TreeReductionStage can be appended. This stage will temporarily remove some edges of the input graph until a tree is obtained. After the layout calculation, the stage will reinsert the edges that were removed and route them separately.

Default Values of Properties

componentLayoutEnabledtrueThe stage that arranges connected graph components is activated.
considerNodeLabelsfalseNode labels are not considered.
defaultNodePlacerDefaultNodePlacer
defaultOutEdgeComparernullNo sorting is executed.
defaultPortAssignmentDefaultTreeLayoutPortAssignment
groupingSupportedtrueGrouping is enabled.
hideGroupsStageEnabledfalseThe stage responsible for hiding group nodes is activated.
integratedEdgeLabelingfalseEdge labels are ignored.
multiParentAllowedfalseMulti-parent structures are not allowed.
parallelEdgeRouterEnabledtrueThe stage that routes parallel edges is activated.
selfLoopRouterEnabledtrueThe stage that routes self-loops is activated.

Type Details

yfiles module
layout-tree
yfiles-umd modules
layout-orthogonal-compact, layout-orthogonal, layout-tree, layout
Legacy UMD name
yfiles.tree.TreeLayout

See Also

Constructors

Properties

Methods

Fields

Constants