C

BundledEdgeRouter

An ILayoutStage that bundles the edges of general undirected graphs to avoid visual cluttering.

Remarks

Bundling together multiple edges means that their common parts are to some degree merged into a bundled part, which is a useful technique to increase the readability of straight-line graph drawings with a high number of edges that connect a comparably small number of nodes. This stage provides means to generate bundled edge paths for any given layout, i.e., the layout generated by a specified coreLayout. To determine whether two edges can be bundled, the algorithm computes a compatibility measure that is composed of various criteria (e.g. edges that are closer together or have similar length are more compatible). Note that this stage ignores the edge bends and handles them all as straight-lines. Furthermore, it doesn't prevent overlaps between nodes and edges.

A result of this stage with default settings

Concept

The implemented algorithm is based on the description in: "Force-directed Edge Bundling for Graph Visualization" by Danny Holten and Jarke J. van Wijk, in Computer Graphics Forum 28(3): 893-990, 2009.

The main idea of the algorithm is that the edges are subdivided into segments and between each pair of consecutive subdivision points spring and electrostatic forces are exerted. At each iteration step, each subdivision point is moved according to the combined force exerted on it. The algorithm runs in six cycles and starts with an initial number of subdivision points for each edge and an initial step size that determines the distance to which each subdivision point can be moved in the direction of the combined force (exerted on it) at each iteration step of the algorithm. After each cycle run, the value of the step size is halved.

Features

Global settings of the bundling can be configured using an EdgeBundling instance. In particular, it is possible to determine which of the edges are compatible and thus, can be bundled together by specifying the strength of the edge bundles using the bundlingStrength property. For the particular algorithm, the default value for this property is 0.4. The bundlingQuality is related to the distance to which a subdivision point can be moved at each iteration step of the algorithm. The default value is 1.

The individual style of each edge can be configured with edgeBundleDescriptors. This allows, for example, to define which edges should actually be bundled.

To visualize better the result of the edge bundling algorithm, it is recommended that the edges are rendered using an opacity factor. In this manner, edges that are strongly bundled together will be emphasized more, in comparison to others that are not bundled.

Complexity

O(N * graph.E()^2 * K) where: N is the number of iterations and K the number of subdivision points per edge

Default Values of Properties

NameDefaultDescription
coreLayoutnull
stopDurationTimeSpan.MAX_VALUE
The bundling algorithm runs unrestricted.

See Also

Developer's Guide

Members

Show:

Constructors

Creates a new BundledEdgeRouter instance with the given optional core layout algorithm and default settings.

Parameters

coreLayout?: ILayoutAlgorithm
The core layout algorithm

Properties

Gets or sets the core ILayoutAlgorithm that is wrapped by this stage.
final

Property Value

the core layout routine

Default Value

The default value is: null
Gets the EdgeBundling instance that defines the settings of the edge bundling feature.

The specified EdgeBundling defines global bundling properties. Settings for individual edges can be defined by assigning an EdgeBundleDescriptor to an edge with edgeBundleDescriptors.

By default, all edges are bundled (property bundled of the default bundle descriptor is enabled). The default for bundlingStrength is 0.4 and the default for property bundlingQuality is 1.0.

readonlyfinal

Property Value

the EdgeBundling instance defining the edge bundling setup
Gets or sets a value that determines whether this stage should do anything but execute the coreLayout.

By default, when constructed, stages should be enabled. Users may disable a stage's functionality by setting this property to false.

Stages that can guarantee that the graph will not change can choose to not even execute the coreLayout when disabled.

final
Gets or sets the stop duration that this bundling algorithm is allowed to run.
The duration needs to be non-negative.
Restricting the stop duration may result in a lower bundling quality. Furthermore, the real runtime may exceed the stop duration since the algorithm still has to find a valid solution.
conversionfinal

Property Value

the non-negative duration

Throws

Exception ({ name: 'ArgumentError' })
if the specified duration has a negative value

Default Value

The default value is: TimeSpan.MAX_VALUE
The bundling algorithm runs unrestricted.

Methods

Implementation of the ILayoutAlgorithm interface and main entry point for the layout calculation.
This implementation checks the enabled state and when it's not enabled, will delegate to the coreLayout, directly. When the stage is enabled, all the work will be delegated to applyLayoutImpl, instead.
final

Parameters

graph: LayoutGraph
The graph to apply the layout to.
Applies the edge bundling algorithm after invoking the coreLayout.
protected

Parameters

graph: LayoutGraph
the input graph