documentationfor yFiles for HTML 2.6

ClassicTreeLayout

This layout algorithm arranges graphs with a tree structure.

Inheritance Hierarchy
MultiStageLayout
ClassicTreeLayout
Implemented Interfaces

Remarks

Layout Style

ClassicTreeLayout is designed to arrange directed and undirected trees that have a unique root node. All children are placed below their parent in relation to the main layout direction. The edges of the graph are routed as straight-line segments or in an orthogonal bus-like fashion.

Tree layout algorithms are commonly used for visualizing relational data and for producing 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.

A Dendrogram

A graph containing group nodes

Left-to-right layout with global layering

Concept

The layout algorithm starts from the root and recursively assigns coordinates to all tree nodes. In this manner, leaf nodes will be placed first, while each parent node is placed centered above its children.

Features

The layout algorithm supports the custom sorting of sibling nodes (i.e., nodes with the same parent node). The property comparer allows specifying the IComparer<T> instance that is used to sort the outgoing edges of each node of the tree. By default, the algorithm sorts the edges by the x-coordinate of the associated target node in ascending order. If the IComparer<T> is set to an instance of NodeOrderComparer, the outgoing edges are sorted by the IComparable instances associated with the edges' target. The mapping of nodes to IComparables can be specified by a IDataProvider that is registered to the graph with key NODE_ORDER_COMPARABLE_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.

ClassicTreeLayout can be configured to reserve space for node labels. It can also place 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.

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

busAlignment0.5The bus is placed in the middle between parent and child nodes.
comparerIComparer<T>An implementation that compares the x-coordinates of the nodes.
componentLayoutEnabledtrueThe stage that arranges connected graph components is activated.
considerNodeLabelsfalseNode labels are not considered.
edgeRoutingStylePLAINEdges are routed as straight-line segments.
enforceGlobalLayeringtrueGlobal layering is enabled.
groupingSupportedtrueGrouping is enabled.
hideGroupsStageEnabledfalseThe stage responsible for hiding group nodes is activated.
integratedEdgeLabelingfalseIntegrated edge labeling is disabled.
leafPlacementSIBLINGS_ON_SAME_LAYERSibling nodes are placed on the same layer.
minimumBusSegmentDistance0
minimumLayerDistance20
minimumNodeDistance20
parallelEdgeRouterEnabledtrueThe stage that routes parallel edges is activated.
portStyleNODE_CENTERPorts are placed at the center of the nodes.
selfLoopRouterEnabledtrueThe stage that routes self-loops is activated.
verticalAlignment0.5Nodes of the same layer are center-aligned.

Type Details

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

See Also

Constructors

Properties

Methods

Constants