Skip to content

OrdinalFrame Connectors

Elijah Meeks edited this page Jan 17, 2018 · 1 revision

Connectors in OrdinalFrame allow you to draw connections between elements in adjacent columns. The current, limited implementation is a simple test that if it returns true draws a link. This function is run on every piece, and it only tests for links to the next column (left to right in vertical, top to bottom in horizonal and clockwise in radial). For "bar" it draws a filled area, for "point" and "swarm" it draws a line.

You can use this functionality to create slopegraphs or funnel diagrams.

The following code will draw a connection between elements in adjoining columns that has the same type value. It will only draw a link to the first matching item in the next column so this cannot be used to draw branching paths or other multi-link connections from one piece to many pieces.

<OrdinalFrame
   connectorType={d => d.type}
   connectorStyle={d => ({ fill: d.source.color })}
/>