Port Alignment
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.
Toggle the button in the toolbar to switch the layout between with port alignment and
without.
Code Snippet
You can copy the code snippet to configure the layout from
GitHub.
Documentation
The Developer's Guide provides in-depth information about
HierarchicalLayoutData and its properties.