Hierarchical Layout with Given Layering

This demo shows how to configure the Hierarchical Layout so that the nodes are placed in a layer which is defined by the user.

To achieve this, the user has to specify a layer index (number) for each node based on which the nodes will be sorted in layers. The smaller index represents the topmost layer. Nodes with the same index will be placed in the same layer.

The layer indices can be passed to the hierarchical layout algorithm through the givenLayersLayererIds property. Also, the user has to set the fromScratchLayeringStrategy property to USER_DEFINED.

In this demo, the layer indices are stored in the nodes' tags and also presented in the labels of the nodes.

Code Snippet

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

Demos

You can also take a look at the Interactive Hierarchical Layout Demo demo in which the user can drag and move the nodes from one layer to another.

Documentation

The Developer's Guide provides more information about the concepts of the hierarchical layout in general and especially about assigning nodes to layers.