Layout Features Tutorial

Orthogonal Layout

This demo shows basic configuration options for the Orthogonal Layout.

See the sources on how the layout is configured.
  • The grid spacing is decreased, which leads to an overall more compact graph.
  • The sources also show how to use the LayoutData to set options for specific edges and nodes in the graph, for example, reserving space around a node (node with 'Halo' text in the sample).
  • Directed edges are defined with a flow in a top-to-bottom orientation (blue edges)
  • For tree substructures, a compact arrangement style with left-to-right orientation is specified. In this example, nodes with text 'Tree' form a subtree. Other supported substructures, not shown in this example, are chains and cycles.

Code Snippet

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

Documentation

See the Orthogonal Layout section in the Developer's Guide for an in-depth discussion of the relevant concepts.