Port Alignment Demo
This demo shows how to implement port alignment in HierarchicalLayout.
The sample data contains edges that belong to different path groups, indicated by the
different edge color. The demo code aligns all source and target ports with the edge paths
by configuring the
sourcePortAlignmentIds and
targetPortAlignmentIds properties of the
PortData.
As a result, the aligned source and target ports at every node have the same y-coordinate,
creating the visual effect in which the edges seem to pass through the node.
Port alignment is particularly useful in graphs where there are paths passing through. It
is less restrictive in comparison to port grouping, since the ports of the aligned edges
can lie on two opposite sides of a node.
Things to Try
-
Toggle between layouts with and without port alignment with the
Align Ports button in the toolbar.
-
Adjust Minimum Port Distance with the slider in the toolbar and observe how
nodes automatically resize to meet the minimum.