This section shows the use of the Link
Layout algorithm (class IlvLinkLayout from the package ilog.views.graphlayout.link).
The Link Layout algorithm uses two
sublayout classes:
- IlvShortLinkLayout in short link mode.
- IlvLongLinkLayout in long link mode.
They implement different strategies to
find the link shapes.
Short Link Layout algorithm
The Short Link Layout algorithm is based
on a combinatorial optimization that chooses the “optimal” shape
of the links to minimize a cost function. This cost function is
proportional to the number of link-to-link and link-to-node
crossings.
For efficiency reasons, the basic shape of each link is chosen
from a set of predefined shapes. These shapes are different for
each link style option. For the orthogonal link style, the links
are reshaped to a polygonal line of up to five alternating
horizontal and vertical segments (see Short link layout with orthogonal links).
For the direct link style, the links are reshaped to a polygonal
line composed of three segments: a straight-line segment that starts and ends
with small horizontal or vertical segments (see The same graph in short link layout with
direct links).
The shape of a link also depends on the
relative position of the origin and destination nodes. For
instance, when two nodes are very close or they overlap, the
shape of the link is chosen to provide the best visibility of the
link.
The exact shape of a link is computed
taking into account additional constraints. The layout algorithm
tries to:
- Minimize the number of crossings between the links incident to a specific side of a node.
- Space the final segments of the links incident to a specific side of a node equally on the node border.
Long Link Layout algorithm
The Long Link Layout algorithm first
treats each link individually. For each link, it first calculates
the connection points at the end nodes that are on the grid and
orders them according to a penalty value. Connection points on
used grid points have a high penalty and, therefore, are unlikely
to be used.
For the orthogonal links (see Long link layout with orthogonal links),
the Long Link Layout algorithm then uses a grid traversal to
search a route over free grid points from the start connection
point to the end connection point. Therefore, in contrast to the
short link mode, orthogonal links can have any shape with many
bends if it is necessary to bypass obstacle nodes to avoid
overlapping. For the direct links, see The same graph in short link layout with
direct links, it shortens the search by using a direct segment
between the connection points.
After all links are placed, a crossing
reduction phase examines pairs of links and eliminates link
crossings by exchanging parts of the routes between both links.
The Long Link Layout algorithm relies on
the fact that links fit to the grid spacing and parts of the
routes between different links can be exchanged. Therefore, the
Long Link Layout algorithm does not take the link width into
account because it would be too difficult to find the parts of
two links that can be exchanged. It is recommended to set the
grid spacing larger than the largest link width.
Example of Link Layout
In CSS
Since the Link Layout only reshapes the links without placing
the nodes, an additional layout algorithm can be specified in
CSS for placing the nodes. The specification can be loaded as
style file into an application that uses the IlvDiagrammer class (see Graph layout in Rogue Wave JViews Diagrammer).
The following example performs only the
Link Layout, without using an additional layout for placing
the nodes.
SDM {
GraphLayout : "false";
LinkLayout : "true";
}
LinkLayout {
layoutMode : "SHORT_LINKS";
globalLinkStyle : "ORTHOGONAL_STYLE";
globalConnectorStyle : "CLIPPED_PINS";
linkOffset : "3";
}
In some situations, you may need a
separate node layout renderer. The following example uses the
Uniform Length Edges Layout to place the nodes and the Link
Layout to reshape the links:
SDM {
GraphLayout : "true";
LinkLayout : "true";
}
GraphLayout {
graphLayout : "UniformLengthEdges";
linkStyle : "NO_RESHAPE_STYLE";
preferredLinksLength : "60";
}
LinkLayout {
layoutMode : "SHORT_LINKS";
globalLinkStyle : "ORTHOGONAL_STYLE";
globalConnectorStyle : "CLIPPED_PINS";
linkOffset : "3";
}
Notice the Link Layout renderer has a
“Hierarchical Link Layout” mode. The Hierarchical Link Layout
is not a separate layout algorithm. It is merely the feature of
the Diagrammer Link Layout renderer to reuse the Hierarchical
Layout as Link Layout, instead of the standard Link Layout. The
following example shows how to activate this mode:
LinkLayout {
hierarchical : "true";
}
In Java
The following code example uses the IlvLinkLayout class. This code sample
shows how to perform a Link Layout on a grapher directly
without using a diagram component or any style sheet:
...
import ilog.views.*;
import ilog.views.graphlayout.*;
import ilog.views.graphlayout.link.*;
...
IlvGrapher grapher = new IlvGrapher();
IlvManagerView view = new IlvManagerView(grapher);
... /* Fill in the grapher with nodes and links here */
IlvLinkLayout layout = new IlvLinkLayout();
layout.attach(grapher);
/* Specify the layout mode */
layout.setLayoutMode(IlvLinkLayout.SHORT_LINKS);
try {
IlvGraphLayoutReport layoutReport = layout.performLayout();
int code = layoutReport.getCode();
System.out.println("Layout completed (" +
layoutReport.codeToString(code) + ")");
}
catch (IlvGraphLayoutException e) {
System.err.println(e.getMessage());
}