Hierarchical Layout with Node Alignment

This demo shows how to configure the Hierarchical Layout so that nodes on different layers that are connected by a critical (important) edge are aligned.

To achieve this, the user has to specify a priority value for each edge that should be considered as important. This value has to be a number greater than zero.

The critical edge priorities can be passed to the Hierarchical Layout algorithm through the criticalEdgePriorities property.

In this demo, we consider as critical the edges that belong to the longest path of the graph (refer to the pink edges). After the execution of the algorithm, the nodes that are connected with the critical edges are vertically aligned. Of course any other criterion may be used to define the set of critical edges and, thus, the aligned nodes.

Note: The nodes are horizontally aligned when using a horizontal layout orientation (i.e. left-to-right).

Code Snippet

You can copy the code snippet to configure the layout from GitHub.

Demos

You can also take a look at the more involved Critical Paths Demo which shows how important paths can be emphasised by the hierarchical layout.

Documentation

The Developer's Guide provides more information about the concepts of the hierarchical layout in general and especially about how to align a set of given nodes.