documentationfor yFiles for HTML 2.6

HierarchicLayout

This layout algorithm arranges graphs in a hierarchic fashion.

Inheritance Hierarchy
MultiStageLayout
HierarchicLayout
Implemented Interfaces

Remarks

Layout Style

The nodes are distributed into layers so that most of the edges point to the main layout direction. The order of the nodes within the layers ensures that the number of edge crossings is as small as possible. There are different edge routing styles available. Edges can be orthogonal, polyline, octilinear or curved (see HierarchicLayoutRoutingStyle for details).

Hierarchical diagrams are commonly used for the visualization of hierarchical data, since they facilitate the identification of dependencies and relationships among the nodes of the graph. Possible application domains are the following: workflow visualization, call graph visualization, entity-relationship diagrams, biochemical pathways and network management.

Hierarchic Layout obtained with default settings

Concept

The layout algorithm runs in three main phases:

  • Layering – The nodes are distributed into layers by means of fromScratchLayerer or fixedElementsLayerer, respectively. If the layout orientation is top-to-bottom, the nodes in each layer are arranged horizontally while the layers are ordered vertically top-to-bottom.
  • Sequencing – The order of the nodes in each layer is determined such that the number of edge crossings is as small as possible. To specify the sequencing algorithm, use fromScratchSequencer or fixedElementsSequencer.
  • Drawing – The layout algorithm assigns the final coordinates to all nodes and routes the edges.

Features

This layout algorithm is able to create hierarchic layouts from scratch or add new elements to the existing sketch drawing incrementally. In order to add elements incrementally to the current sketch or let the algorithm optimize certain elements in the current sketch, set the layout mode to INCREMENTAL. Then register a IDataProvider (e.g. use createHashedDataMap) with the graph using the INCREMENTAL_HINTS_DP_KEY DataProvider key and associate the hints obtained from the IIncrementalHintsFactory with the elements to be added incrementally.

HierarchicLayoutNodeLayoutDescriptor and HierarchicLayoutEdgeLayoutDescriptor instances can be used for specifying individual information (e.g. distances or routing styles) for each node and edge in the graph. The descriptors are bound to the graph using IDataProviders registered with NODE_LAYOUT_DESCRIPTOR_DP_KEY or EDGE_LAYOUT_DESCRIPTOR_DP_KEY. If there is no descriptor assigned to some nodes/edges, a default descriptor will be used. To set default descriptors use nodeLayoutDescriptor and edgeLayoutDescriptor.

HierarchicLayout supports two approaches to connect edges on a specific side or even an exact location to a node. PortConstraints define a single constraint for the ports of an edge. To realize more complex port restrictions, several PortCandidates or PortCandidateSets can be assigned to edges or nodes. If an edge with registered PortCandidates connects to nodes with PortCandidateSets, the algorithm will try to match both collections to find an appropriate port. In case there is no matching port candidate, a PortCandidate specified for the edge is preferred. For the matching to work properly, the candidates in both collection need to be the same instances. Since their simultaneous existence at the same node may be ambiguous, it is not recommended to use a combination of PortConstraints and PortCandidates in the same layout. Furthermore, PortCandidates with multiple directions (e.g. EAST or WEST) are not supported. To model that an edge should connect at one of several sides, define multiple candidates instead, where each candidate has a single direction.

The edge grouping feature of this layout algorithm is restricted to normal, hierarchic edges. Edges with recursive edge style DIRECTED or UNDIRECTED will not be grouped. They are also not grouped when enabling automatic edge grouping.

The port grouping feature (see SOURCE_PORT_GROUP_ID_DP_KEY and TARGET_PORT_GROUP_ID_DP_KEY) allows to specify edges that share the same port location at their source/target. However, unlike as for edge grouping, edges with port groups will be routed independently without sharing segments. Port grouping has similar restrictions as the edge grouping feature. In addition, port grouping is not considered for self-loops.

The HierarchicLayout also supports node types as a subordinate criterion during the sequencing of nodes within their layer. More precisely, the sequencing algorithm prefers to place nodes of the same type next to each other if this does not induce additional crossings or conflicts with other constraints (like node groups, swimlanes, or sequence constraints). The algorithm uses an additional local optimization heuristic to improve the placement with respect to node types and, thus, does not guarantee optimal results. Furthermore, this additional step may increase the required runtime. Note that node types do not affect the layer assignment.

HierarchicLayout allows restricting the maximum duration which may be a suitable option to reduce the runtime required for large graphs. Note that restricting the maximum duration may result in a lower layout quality. Furthermore, the actual runtime may exceed the maximum duration since the layout algorithm still has to find a valid solution.

Default Values of Properties

componentArrangementPolicyTOPMOSTConnected components are aligned with their first layer.
componentLayoutEnabledfalseThe stage that arranges connected graph components is activated.
considerNodeLabelsfalseNode labels are not considered.
gridSpacing0There is no grid specified.
groupAlignmentPolicyCENTERGroups and normal nodes are center aligned.
hideGroupsStageEnabledfalseThe stage responsible for hiding group nodes is activated.
integratedEdgeLabelingfalseIntegrated edge labeling is disabled.
layoutModeFROM_SCRATCH
maximumDuration<code>0x7FFFFFFF</code>The layout algorithm runs unrestricted.
parallelEdgeRouterEnabledfalseThe stage that routes parallel edges is activated.
recursiveGroupLayeringtrueGroups are layered recursively.
selfLoopRouterEnabledfalseThe stage that routes self-loops is activated.

Type Details

yfiles module
layout-hierarchic
yfiles-umd modules
layout-familytree, layout-hierarchic, layout-radial, layout
Legacy UMD name
yfiles.hierarchic.HierarchicLayout

See Also

For edges incident to group nodes, the HierarchicLayout only considers weak PortConstraints.

Constructors

Properties

Methods

Constants

Static Methods