Port Alignment
This demo shows how to implement port alignment in HierarchicalLayout.
The sample data contains edges that belong to different path groups. The demo code aligns
all source and target ports with the edge paths by configuring the
sourcePortAlignmentIds
and targetPortAlignmentIds
properties of
the PortData
class.
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.
Documentation
The Developer's Guide provides in-depth information about
HierarchicLayoutData and its properties.