Aggregating Links

When charts contain many links between individual pairs of nodes or combos, it can become difficult to analyze your chart.

Aggregate links let you combine groups of links between two nodes and style them to summarize information about the underlying links, making the chart much easier to understand:

To explore further, see the Link Aggregation story.

Note that centrality measures ignore aggregate links so the results are based on the unaggregated chart.

Enabling

Enable link aggregation using the aggregateLinks prop. When enabled, any number of links betwen a pair of nodes (including a single link) can be aggregated.

You can set the aggregateLinks prop to true to aggregate all the links between node pairs, or:

  • Aggregate links by a custom data property by passing its name in the aggregateBy option:
// myProperty is a custom property on data
aggregateLinks: { aggregateBy: 'myProperty' };
  • Aggregate links by direction by setting the aggregateByDirection to true. Arrowheads are added by default if the underlying links have them.
// myProperty is a custom property on data
aggregateLinks: { aggregateBy: 'myProperty', aggregateByDirection: true };

When an aggregate link is created between a pair of nodes or combos, its id1 and id2 properties are assigned in the alphabetical order of the node/combo ids. This creates consistency in case the id1 and id2 properties of underlying child links aren't all assigned in the same order.

You should consider this alphabetical order if you:

  • Set arrows directly on aggregate links - end1 and end2 of aggregate and child links may be reversed
  • Set flow animation on aggregate links - directions of aggregate and child links may be reversed

Reversed order of aggregate and child links can also affect sequential layout when top or level aren't specified.

Styling

The default styling for an aggregate link is the same as for a regular link, i.e. a gray link with a width of 1.

Aggregate links inherit any arrows set on end1 and end2 properties of the child links. They do not inherit any other styling properties.

Styling for aggregate links is done in the onLinkAggregation event. When aggregateLinks is set, the event is invoked each time an aggregate link is created, deleted or updated. The update occurs when at least one of its child links is updated in a relevant way:

  • A child link is added or removed.
  • A child link's arrow on end1 or end2 are updated.
  • In the data object, the custom property used for aggregating links is changed.

When invoked, the onLinkAggregation event returns the link's id and other information in an aggregateLinkDefinition object.

To style aggregate links, call the setStyle function in the onLinkAggregation event handler:

<Chart onLinkAggregation={
  ({ links, id1, id2, id, aggregateByValue, change, setStyle }) => {
    setStyle({
      // styles the link width proportionately to number of children
      width: Math.sqrt(Object.keys(links).length)
    });
  }
}/>

The Link Aggregation story uses styling to summarize information about the child links.

Terms of use

These terms do not alter or supersede any existing agreements between you (or your employer) and us.

By accessing or using any Content you agree to be bound by these Terms of Use. Please review these terms carefully before using the website.

The contents of this website, including but not limited to any text, code samples, API references, schemas, interactive tools, and other materials (collectively, the 'Content'), are made available for informational and internal evaluation purposes only. All intellectual property rights in the Content are reserved. No licence is granted to use the Content for any commercial purpose, or to copy, distribute, modify, reverse-engineer, or incorporate any part of the Content into any product or service, without our prior written consent.

This Content is provided “as is” and “as available,” without any representations, warranties, or guarantees of any kind, whether express or implied, including but not limited to implied warranties of merchantability, fitness for a particular purpose, non-infringement, or accuracy. To the fullest extent permitted by applicable law, we expressly exclude and disclaim all implied warranties, conditions, and other terms that might otherwise be implied.

We disclaim all liability for any loss or damage, whether direct, indirect, incidental, consequential, or otherwise, arising from any reliance placed on the Content or from your use of it, to the fullest extent permitted by applicable law. By continuing to access or use the Content, you acknowledge and agree to these terms.