documentationfor yFiles for HTML 2.6

EdgeBundlingStage

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

Inheritance Hierarchy
LayoutStageBase
EdgeBundlingStage
Implemented Interfaces

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 core layout algorithm. 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 bundling quality 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 using an EdgeBundleDescriptor. A IDataProvider can be registered with the input graph with key EDGE_BUNDLE_DESCRIPTOR_DP_KEY to assign descriptors to edges. 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.

Default Values of Properties

maximumDuration<code>0x7FFFFFFF</code>The bundling algorithm runs unrestricted.

Type Details

yfiles module
router-other
yfiles-umd modules
layout-familytree, layout-multipage, layout-orthogonal-compact, layout, router-bus, router-other
Legacy UMD name
yfiles.router.EdgeBundlingStage

See Also

This algorithm doesn't consider the current bends of the edges, i.e., it always handles them as straight-line. Furthermore, this stage doesn't prevent overlaps between nodes and edges.
Using high values of for the bundling strength can significantly affect the performance of the algorithm, especially for large graphs. A value close to 0.4 is recommended. On the other hand, using zero values for the bundling strength or the bundling quality leads to straight-line edges.
The bundle descriptor property considerDirection is ignored by this stage.

Constructors

Properties

Methods