This layout algorithm arranges graphs with a tree structure.
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.
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
busAlignment | 0.5 | The bus is placed in the middle between parent and child nodes. |
comparer | IComparer<T>
| An implementation that compares the x-coordinates of the nodes. |
componentLayoutEnabled | true | The stage that arranges connected graph components is activated. |
considerNodeLabels | false | Node labels are not considered. |
edgeRoutingStyle | PLAIN
| Edges are routed as straight-line segments. |
enforceGlobalLayering | true | Global layering is enabled. |
groupingSupported | true | Grouping is enabled. |
hideGroupsStageEnabled | false | The stage responsible for hiding group nodes is activated. |
integratedEdgeLabeling | false | Integrated edge labeling is disabled. |
leafPlacement | SIBLINGS_ON_SAME_LAYER
| Sibling nodes are placed on the same layer. |
minimumBusSegmentDistance | 0 | |
minimumLayerDistance | 20 | |
minimumNodeDistance | 20 | |
parallelEdgeRouterEnabled | true | The stage that routes parallel edges is activated. |
portStyle | NODE_CENTER
| Ports are placed at the center of the nodes. |
selfLoopRouterEnabled | true | The stage that routes self-loops is activated. |
verticalAlignment | 0.5 | Nodes 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
Creates a new ClassicTreeLayout instance with default settings.
Parameters
A map of options to pass to the method.
- minimumBusSegmentDistance - number
The minimum (vertical) distance of the horizontal edge segments of the bus between the root node and the child nodes. This option sets the minimumBusSegmentDistance property on the created object.
- enforceGlobalLayering - boolean
Whether or not a global layering is enforced, that is, each node spans exactly one layer. This option sets the enforceGlobalLayering property on the created object.
- leafPlacement - LeafPlacement
The layout policy for leaf nodes. This option sets the leafPlacement property on the created object.
- groupingSupported - boolean
Whether or not group nodes are handled by the layout algorithm. This option sets the groupingSupported property on the created object.
- comparer - IComparer<Object>
The IComparer<T> instance that is used for sorting the outgoing edges of each node of the tree. This option sets the comparer property on the created object.
- portStyle - PortStyle
The port assignment policy that will be applied. This option sets the portStyle property on the created object.
- edgeRoutingStyle - ClassicTreeLayoutEdgeRoutingStyle
The edge routing style used by this layout algorithm. This option sets the edgeRoutingStyle property on the created object.
- minimumNodeDistance - number
The minimum horizontal distance between adjacent nodes within the same layer. This option sets the minimumNodeDistance property on the created object.
- minimumLayerDistance - number
The minimum distance between two adjacent layers. This option sets the minimumLayerDistance property on the created object.
- considerNodeLabels - boolean
Whether or not the layout algorithm reserves space for node labels. This option sets the considerNodeLabels property on the created object.
- integratedEdgeLabeling - boolean
Whether or not the layout algorithm reserves space for edge labels and places them. This option sets the integratedEdgeLabeling property on the created object.
- busAlignment - number
The vertical bus alignment for orthogonally routed edge buses. This option sets the busAlignment property on the created object.
- minimumFirstSegmentLength - number
The minimum length for the first segment of an edge. This option sets the minimumFirstSegmentLength property on the created object.
- minimumLastSegmentLength - number
The minimum length for the last segment of an edge. This option sets the minimumLastSegmentLength property on the created object.
- verticalAlignment - number
The vertical alignment of the nodes within their corresponding layers. This option sets the verticalAlignment property on the created object.
- modificationMatrix - RotatableNodePlacerMatrix
The modification matrix used for rotating / mirroring the layout. This option sets the modificationMatrix property on the created object.
- componentLayoutEnabled - boolean
Whether or not the ILayoutStage used for arranging the components of the graph is activated. This option sets the componentLayoutEnabled property on the created object.
- parallelEdgeRouterEnabled - boolean
Whether or not the ILayoutStage used for routing parallel edges is activated. This option sets the parallelEdgeRouterEnabled property on the created object.
- selfLoopRouterEnabled - boolean
Whether or not the ILayoutStage used for routing self-loops is activated. This option sets the selfLoopRouterEnabled property on the created object.
- labeling - ILayoutStage
The ILayoutStage that places the labels of the input graph. This option sets the labeling property on the created object.
- selfLoopRouter - ILayoutStage
The ILayoutStage that routes self-loops. This option sets the selfLoopRouter property on the created object.
- parallelEdgeRouter - ILayoutStage
The ILayoutStage that routes parallel edges. This option sets the parallelEdgeRouter property on the created object.
- componentLayout - ILayoutStage
The ILayoutStage that arranges the connected components of an input graph. This option sets the componentLayout property on the created object.
- subgraphLayout - ILayoutStage
The ILayoutStage that constrains the layout process to a subgraph of the input graph. This option sets the subgraphLayout property on the created object.
- hideGroupsStage - ILayoutStage
The ILayoutStage that hides the group nodes of the input graph. This option sets the hideGroupsStage property on the created object.
- orientationLayout - ILayoutStage
The ILayoutStage that modifies the orientation of a computed layout. This option sets the orientationLayout property on the created object.
- orientationLayoutEnabled - boolean
Whether or not the ILayoutStage that modifies the orientation of the layout is activated. This option sets the orientationLayoutEnabled property on the created object.
- layoutOrientation - LayoutOrientation
The main orientation of the layout. This option sets the layoutOrientation property on the created object.
- labelingEnabled - boolean
Whether or not the ILayoutStage used for placing the labels of the input graph is activated. This option sets the labelingEnabled property on the created object.
- hideGroupsStageEnabled - boolean
Whether or not the ILayoutStage used for hiding group nodes is activated. This option sets the hideGroupsStageEnabled property on the created object.
- subgraphLayoutEnabled - boolean
Whether or not the ILayoutStage used for constraining the layout process to a subgraph of the input graph is activated. This option sets the subgraphLayoutEnabled property on the created object.
Properties
Gets or sets the vertical bus alignment for orthogonally routed edge buses.
Remarks
[0,1]
where:- A value of
0
places the bus at the top, directly below the parent node. - A value of
0.5
places the bus in the middle between parent and child nodes. - A value of
1
places the bus at the bottom, directly above the child nodes.
Default Value
0.5
.The bus is placed in the middle between parent and child nodes.
Throws
- Exception({ name: 'ArgumentError' })
- if
busAlignment
is not in[0,1]
See Also
Sample Graphs
- ORTHOGONAL layout style with global layering enforced.
- ORTHOGONAL layout style with child placement policy ALL_LEAVES_ON_SAME_LAYER.
Gets or sets the IComparer<T> instance that is used for sorting the outgoing edges of each node of the tree.
Remarks
Default Value
See Also
Gets or sets the ILayoutStage that arranges the connected components of an input graph.
Default Value
ComponentLayout.See Also
Defined in
Sets whether or not the ILayoutStage used for arranging the components of the graph is activated.
Default Value
true
.The stage that arranges connected graph components is activated.
See Also
Overrides
Gets or sets whether or not the layout algorithm reserves space for node labels.
Default Value
false
.Node labels are not considered.
See Also
Sample Graphs
Gets or sets the edge routing style used by this layout algorithm.
Remarks
Default Value
Throws
- Exception({ name: 'ArgumentError' })
- if an invalid layout style is provided
See Also
Gets or sets whether or not a global layering is enforced, that is, each node spans exactly one layer.
Remarks
If it is enabled, the algorithm ensures that nodes never span more than one layer. Otherwise, nodes with larger size might span two or more layers such that a more compact layout is produced.
This setting can be advantageous, if the hierarchical structure of the tree should be emphasized.
Default Value
true
.Global layering is enabled.
See Also
Sample Graphs
Gets or sets whether or not group nodes are handled by the layout algorithm.
Default Value
true
.Grouping is enabled.
See Also
Sample Graphs
Gets or sets the ILayoutStage that hides the group nodes of the input graph.
Default Value
HideGroupsStage.See Also
Defined in
Gets or sets whether or not the ILayoutStage used for hiding group nodes is activated.
Remarks
Default Value(Overrides the default value defined in MultiStageLayout)
false
.The stage responsible for hiding group nodes is activated.
See Also
Defined in
Gets or sets whether or not the layout algorithm reserves space for edge labels and places them.
Remarks
To define the desired placement for each label add a PreferredPlacementDescriptor on IEdgeLabelLayout.
This method is a convenience method that assures that the label layouter is of type LabelLayoutTranslator and translateEdgeLabels is set to true
.
Default Value
false
.Integrated edge labeling is disabled.
See Also
Sample Graphs
Gets or sets the ILayoutStage that places the labels of the input graph.
Default Value
See Also
Defined in
Gets or sets whether or not the ILayoutStage used for placing the labels of the input graph is activated.
Remarks
Default Value
false
.The stage responsible for label placement is deactivated.
See Also
Defined in
Gets or sets the main orientation of the layout.
Remarks
Default Value
TOP_TO_BOTTOM.Throws
- Exception({ name: 'ArgumentError' })
- if the specified orientation does not match a default layout orientation
See Also
Defined in
Gets or sets the layout policy for leaf nodes.
Gets or sets the minimum (vertical) distance of the horizontal edge segments of the bus between the root node and the child nodes.
Remarks
0
, all segments are routed in a classical bus-like style.Default Value
0
.Throws
- Exception({ name: 'ArgumentError' })
- if the specified distance is smaller than
0
See Also
Sample Graphs
Gets or sets the minimum length for the first segment of an edge.
Remarks
During layout calculation, the edges of the tree are directed. Hence, the first segment is always the segment that is attached to the source, which is the local root node.
The length needs to be non-negative.
Default Value
20
.Throws
- Exception({ name: 'ArgumentError' })
- if the minimum segment length is negative
See Also
Sample Graphs
Gets or sets the minimum length for the last segment of an edge.
Remarks
During layout calculation, the edges of the tree are directed. Hence, the last segment is always the segment that is attached to the target, which is a child node.
The length needs to be non-negative.
Default Value
20
.Throws
- Exception({ name: 'ArgumentError' })
- if the minimum segment length is negative
Sample Graphs
Gets or sets the minimum distance between two adjacent layers.
Default Value
20
.Throws
- Exception({ name: 'ArgumentError' })
- if the given distance is negative
See Also
Sample Graphs
Gets or sets the minimum horizontal distance between adjacent nodes within the same layer.
Default Value
20
.Throws
- Exception({ name: 'ArgumentError' })
- if the given distance is negative
See Also
Sample Graphs
Gets or sets the modification matrix used for rotating / mirroring the layout.
Default Value
DEFAULT.Gets or sets the ILayoutStage that modifies the orientation of a computed layout.
Default Value
OrientationLayout.See Also
Defined in
Gets or sets whether or not the ILayoutStage that modifies the orientation of the layout is activated.
Remarks
Default Value
true
.The orientation
See Also
Defined in
Gets or sets the ILayoutStage that routes parallel edges.
Default Value
ParallelEdgeRouter.See Also
Defined in
Sets whether or not the ILayoutStage used for routing parallel edges is activated.
Default Value
true
.The stage that routes parallel edges is activated.
See Also
Overrides
Gets or sets the port assignment policy that will be applied.
Default Value
See Also
Gets or sets the ILayoutStage that routes self-loops.
Default Value
SelfLoopRouter.See Also
Defined in
Sets whether or not the ILayoutStage used for routing self-loops is activated.
Default Value
true
.The stage that routes self-loops is activated.
See Also
Overrides
Gets or sets the ILayoutStage that constrains the layout process to a subgraph of the input graph.
Default Value
SubgraphLayout.See Also
Defined in
Gets or sets whether or not the ILayoutStage used for constraining the layout process to a subgraph of the input graph is activated.
Remarks
Default Value
false
.The stage that constrains the input graph to a subgraph is deactivated.
See Also
Defined in
Gets or sets the vertical alignment of the nodes within their corresponding layers.
Remarks
The value for the vertical alignment is considered as relative to the height of the corresponding layer, which is determined by the maximum height of the nodes that belong to the particular layer.
The value of this property must lie within the interval [0,1]
, where:
- A value of
0
corresponds to top-alignment. - A value of
0.5
corresponds to center-alignment. - A value of
1
corresponds to bottom-alignment.
Default Value
0.5
.Nodes of the same layer are center-aligned.
Throws
- Exception({ name: 'ArgumentError' })
- if vertical alignment value does not lie within
[0,1]
See Also
Sample Graphs
Methods
Appends the given ILayoutStage to the layout pipeline.
Remarks
Parameters
A map of options to pass to the method.
- stage - ILayoutStage
- the ILayoutStage instance to be added
See Also
Defined in
Calculates a layout for the given graph and applies it directly to the graph.
Remarks
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
See Also
Implements
Arranges the given graph as a tree.
Parameters
A map of options to pass to the method.
- graph - LayoutGraph
- the input graph
Implements
Checks the sizes of the nodes to be non-zero.
Parameters
A map of options to pass to the method.
- g - LayoutGraph
- The graph to check.
Defined in
Deactivates all predefined ILayoutStages so that upon applyLayout only the layout algorithm will be executed.
See Also
Defined in
Prepends the given ILayoutStage to the layout pipeline.
Remarks
Parameters
A map of options to pass to the method.
- stage - ILayoutStage
- the ILayoutStage instance to be added
See Also
Defined in
Removes the given ILayoutStage from the layout pipeline.
Remarks
Parameters
A map of options to pass to the method.
- stage - ILayoutStage
- a ILayoutStage to be removed from the layout pipeline
See Also
Defined in
Constants
A data provider key for marking the node that will be used as root node of the tree.
Domain | YNode | |
Values | boolean | true if the node should be considered as the root node of the tree, false otherwise |