Edge Bundling

The edge bundling feature can be used to group the paths of edges in a diagram so that they follow similar routes.

Edge bundling significantly reduces visual clutter in drawings of large graphs with many edges. In addition, high-level patterns of edge routes and relations between different groups of nodes can be highlighted and easily recognized. Edge bundling is commonly used in bioinformatics, social network analysis, telecommunications, and fraud detection.

Classes EdgeBundling and EdgeBundleDescriptor provide the means to configure options related to the edge bundling support.

The following layout algorithms provide support for edge bundling:

The BundledEdgeRouter is a generic stage that creates bundled paths based on the layout generated by any given core layout algorithm. Therefore, it can be applied when using an algorithm different from the ones mentioned above. Note that this stage ignores the current edge bends and may produce overlaps between nodes and edges.

Configuration

Class EdgeBundling defines global settings for edge bundling, such as the strength and quality of the bundling.

Bundling Strength
bundlingStrength: number: Determines how tightly the edges are bundled. It accepts values from the interval [0.0, 1.0], where 0.0 corresponds to straight-line, non-bundled edges and 1.0 to strongly bundled edges. For good readability with clearly visible bundles, a bundling strength greater than 0.8 is recommended.
Bundling Quality
bundlingQuality: number: Determines the quality of the edge bundling. Higher values require more complex methods to calculate the bundles, and therefore, the running time can increase significantly. The setting accepts values from the interval [0.0, 1.0]. For large graphs, values smaller than 0.2 are recommended.

In addition, it contains an EdgeBundleDescriptor instance with default settings for individual edges in a graph. You can use the following property to retrieve this default EdgeBundleDescriptor instance:

defaultBundleDescriptor: Property to access the default edge bundling descriptor held by EdgeBundling.

Class EdgeBundleDescriptor can be used to specify settings for individual edges. The following configuration options are available:

Bundle Edge
bundled: boolean: Determines whether an edge should be bundled.
Consider Edge Direction
considerDirection: boolean: Determines whether the direction of an edge should be considered. If enabled, incoming and outgoing edges that are incident to a node are bundled separately.
Use Bezier Fitting
bezierFitting: boolean: Determines whether the path of an edge should be approximated by a cubic Bezier curve. Approximation can significantly reduce the number of bends.

EdgeBundleDescriptors can also be specified individually for each edge to provide custom configuration for specific edges. You can set individual descriptors using the Layout Data of the respective layout algorithms.

Sample Layout

Performing a layout with edge bundles

// blue edges should be bundled
const blueEdgeBundleDescriptor = new EdgeBundleDescriptor({
  bundled: true
})
// green edges should not be bundled
const greenEdgeBundleDescriptor = new EdgeBundleDescriptor({
  bundled: false
})

// create a circular layout instance
const layout = new CircularLayout({
  partitioningPolicy: 'single-cycle'
})

// use LayoutData to configure the edge bundle descriptors
const layoutData = layout.createLayoutData()
// assign the edge bundle descriptors to the edges depending on their color
// i.e. on the value stored in their tag
layoutData.edgeBundleDescriptors.mapperFunction = (edge) =>
  edge.tag === 'blue'
    ? blueEdgeBundleDescriptor
    : edge.tag === 'green'
      ? greenEdgeBundleDescriptor
      : null

// and, finally, apply the configured circular layout
graph.applyLayout(layout, layoutData)

Edge and Port Grouping Grouped Graphs