Hierarchical Layout with Edge Labeling

This demo shows how to configure the HierarchicalLayout for automatic edge label placements.

Label Placement

Label models and their parameters control where labels appear. For manual placement, it's common to use models that limit possible positions. However, for automatic layout, it's best to use unrestricted models like FreeEdgeLabelModel for maximum flexibility.

You can further guide label placement using EdgeLabelPreferredPlacement, which specifies preferences such as placing labels near the edge's source or target, on a particular side, or with a specific rotation.

In this demo, each label is placed according to its text. Note that the default prevention of upside-down labels is turned off to enable rotation of Upside down and Upwards labels.

Things to Try

• Observe how "Close to Source" label appear near the edge’s source node.
• Observe "Close to Target" label near the target node.
• Notice "Parallel" labels aligned with the edge direction.
• Check the "Rotated" label, rotated by a fixed angle.
• Examine "Upside down" and "Upwards" labels which showcase special rotation configurations.

Demos

• Edge Label Placement Demo

Documentation

• Labeling
• Automatic Label Placement
• EdgeLabelPreferredPlacement class
• FreeEdgeLabelModel class
• autoFlip property