Description

Demonstrates different yfiles.tree.INodePlacer implementations for yfiles.tree.TreeLayout.

Each node can have a separate NodePlacer assigned to arrange its children in a certain style. In this demo, all nodes of the same layer get the same NodePlacer.

Configure the NodePlacers

The panel on the right offers a set of settings for the NodePlacer of the selected layer. Changing an option in the panel will update the layout of the graph immediately. A preview demonstrates the chosen subtree style in a smaller context.
If there wasn't a NodePlacer selected for the current layer, yet, a yfiles.tree.DefaultNodePlacer is used.
  • Select the layer to change either by selecting a node or directly in the panel.
  • Some NodePlacers offer rotation and mirroring of the subtree. Click the buttons to see the effect.
  • Reset the NodePlacer to yfiles.tree.DefaultNodePlacer with initial settings by clicking the -Button.
  • Toggle the Assistant-marking for single nodes by double-clicking on them. They will show their effect when their parent layer has yfiles.tree.AssistantNodePlacer assigned.

Change the Graph

The graph can be altered interactively. In this demo, adding and deleting nodes will keep the tree-structure of the graph intact. Also, each change will trigger a layout calculation.
  • Add nodes (and edges) by dragging from an unselected node.
  • Removing selected nodes will remove the whole subtree. 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.
Imprint | Privacy Policy | View on GitHub

Node Placer Settings

Rotation/Mirroring

Settings

Settings

Settings

Settings

Settings

Settings

Settings

Settings