All
API
Docs
Demos
Blogs
Webinars

Introduction

Links represent connections between nodes within your data, and can be styled for visual impact, to convey meaning and to help highlight different aspects of your data structure.

Links can be customised for example with with arrows (using a1 and a2 properties for both ends), link colour (c), dashed or dotted line style (ls), or animation (flow).

You can use the d property to store custom data on links and display this data as glyphs and labels as shown in the Style Links demo:

Style Links KeyLines demo screenshot

You can update link properties using setProperties, and control how links look and behave as users select them using the selectedLink chart option.

Links between nodes are direct straight lines by default, but some layouts and arrangements such as sequential can benefit from other link shapes.

Link shapes

A link shape is the path taken by a link connecting two nodes. KeyLines provides different link shapes to help enhance the clarity and impact of your dataset.

To change a link shape:

See Using a mixture of link shapes for information about how to use multiple link shapes in your chart.

Direct links

linkShape = 'direct'

Direct links, the default option, are straight lines that run directly between two nodes. They are well-suited for charts focussing on overall connectivity, such as those using organic, lens, radial or structural layouts.

Multiple links between any pair of nodes are separated using arcs so that they don't overlay and obscure one another. If your chart contains large numbers of links between individual pairs of nodes or combos, you can bundle them into aggregate links.

Explore direct links and their properties in the Style Links demo.

graph showing direct links in an organic layout

Direct links, organic layout

Angled links

linkShape = 'angled'

Angled links, currently in beta, provide an orthogonally branching shape. This shape is designed for hierarchical data using the sequential layout. Angled links are always aligned with the orientation of the layout. See Sequential Layout Options for details.

They are ideal for displaying charts with multiple levels of dependency. Pair them with the sequential combo arrangement to view and explore large, multi-layered data systems.

As angled links can often partly overlay one another, you can use priority links to surface and highlight particular paths.

Explore angled links and link priority in the Path Analysis in Trees demo.

graph showing angled links with a right orientation in a sequential layout

Angled links, right orientation, sequential layout

Curved links

linkShape = 'curved'

Curved links flow between nodes in different levels of a hierarchical structure. They are best suited to sequential layouts, and are aligned with the layout's orientation.

Multiple links between any pair of nodes are displayed with different curvatures so that they don't overlay and obscure each other.

graph showing curved links with a down orientation in a sequential layout

Curved links, down orientation, sequential layout

When integrating KeyLines with Leaflet, only direct links are used.

Using a mixture of link shapes

Link shape can be set at different levels - at a chart level, at a combo arrangement level, or even for an individual link level (this option takes precendence).

Setting an individual link's linkShape property, currently in beta, specifies both its shape and the direction in which it connects to its end nodes. This can help represent different types of relationship in your chart.

For instance, you can have a chart with a sequential layout and angled links, where relationships between certain individual nodes are highlighted using curved links, as shown in our example.

graph using angled links by default, with some curved links
Using angled links with some individually curved links

Explore this further in the Mixed Link Shapes demo.

Prioritising links

If you have a busy chart or want to focus on a critical path through a network, KeyLines allows you to enhance the visibility of some links by designating them 'priority links', currently in beta.

To do this, set the priority link property. Priority links are displayed in a separate layer, in front of the non-priority layer, whether selected or not, and shown clearly at all zoom levels.

Explore the use of link priority in the Path Analysis in Trees demo.

graph showing priority links in a sequential layout
Using priority links with a sequential layout

Multiple links between two nodes

By default KeyLines automatically spaces out multiple direct or curved links running between two nodes to display them clearly. It does this by adding space, also referred to as an offset, between the midpoint of the links and the straight line joining their end-nodes.

Offset direct links follow arcs, as shown, while offset curved links follow a double curve.

Angled links are not offset. To focus on a critical path through a chart using angled links, use priority links.

graph showing direct links in an organic layout and offset pair
Direct links with an offset pair

You can also control how multiple links between a pair of nodes are displayed using link aggregation; see Aggregate Links

Styling self links

Self links are always drawn as arcs, independently of link shape, as described in Self Link Offsets.