Tree Layout Demo [yFiles for HTML]

Tree Layout Demo

Demonstrates the tree layout style and the different ways in which this layout can arrange a node and its children.

With tree layout, each node can have a separate ISubtreePlacer which is responsible for the arrangement of its children in a certain style.

Configure the Subtree Placers

You can configure the subtree placer of the selected nodes in the right side panel. Changing an option in the panel immediately updates the layout of the graph. A preview demonstrates the chosen subtree style in a smaller context.

Some subtree placers offer rotation and mirroring of the subtree.

Toggle the Assistant marking for a single node by double-clicking on it. They will show their effect when their parent node has AssistantSubtreePlacer assigned.

SingleLayerSubtreePlacer is used for nodes without an explicit assignment.

Sample Graphs

Default Tree is a regular tree which is arranged using a combination of LeftRightSubtreePlacer and SingleLayerSubtreePlacer for each subtree.

Wide Tree has the same structure as the DefaultTree but is arranged only using SingleLayerSubtreePlacer.

Category Tree uses SingleLayerSubtreePlacer to place the categories in columns and arranges the nodes of each category stacked left-right.

General Graph is not a tree and uses the TreeReductionStage to prepare the graph for TreeLayout. In this sample, non-tree edges are routed with organic style.

Large Tree uses CompactSubtreePlacer for some subtrees to get a compact layout.

Change the Graph

Changing the graph in this demo will keep its tree structure intact, and each change will trigger a layout calculation.

Add nodes (and edges) by dragging from an unselected node.

Removing selected nodes will remove their whole subtrees. The root node cannot be deleted.

Resize nodes to see how the layout changes.

Change the order of children by adding number labels using the F2 key.

Subtree Placer Settings

Select a node or a subset of nodes to assign a SubtreePlacer which defines the layout style for its children.

Settings

Routing Style

Root Alignment

Minimum Channel Segment Distance 40

Settings

Root Alignment

Bus Placement

Settings

Root Alignment

Settings

Last on Bottom

Branch Count 1

Settings

Aspect Ratio 1

Child Alignment Policy

Horizontal Distance 40

Vertical Distance 40

Child Arrangement

Settings

Child Subtree Placer

Settings

Preferred Aspect Ratio 1

Vertical Distance 1

Horizontal Distance 1

Minimum First Segment Length 1

Minimum Last Segment Length 1