@vx/chord

Chord diagrams show directed relationships among a group of entities in a radial layout.

Installation

npm install --save @vx/chord

Examples

Chord

<Chord.Chord /> & <Chord.Ribbon />

Components

<Chord />
<Ribbon />

APIs

#<Chord />

# Chord.children(chords: { chords: Chords; }) => ReactNoderequired

Child render function, passed the configured chords.

# Chord.matrixnumber[][]required

Square data matrix of size n×n, where the matrix represents the directed flow amongst a network (a complete digraph) of n nodes. The given matrix must be an array of length n, where each element matrix[i] is an array of n numbers, where each matrix[i][j] represents the flow from the ith node in the network to the jth node. Each number matrix[i][j] must be nonnegative, though it can be zero if there is no flow from node i to node j.

# Chord.padAnglenumber | undefinedoptional

Sets the pad angle between adjacent groups to the specified number in radians.

# Chord.sortChordsDefaultSortComporator | null | undefinedoptional

Comparator used to sort the chords by their combined flow; this only affects the z-order of the chords.

# Chord.sortGroupsDefaultSortComporator | null | undefinedoptional

Comparator used to sort the groups by their total outflow.

# Chord.sortSubgroupsDefaultSortComporator | null | undefinedoptional

Comparator used to sort the subgroups corresponding to matrix[i][0 … n - 1] for a given group i by their total outflow.

#<Ribbon />

# Ribbon.chordChordrequired

Chord for which to render a ribbon.

# Ribbon.children(({ path }: { path: string | null; }) => string | undefined) | undefinedoptional

Override the default rendering of a chord <path />.

# Ribbon.classNamestring | undefinedoptional

Classname to apply to the rendered <path />.

# Ribbon.endAnglenumber | NumAccessor | undefinedoptional

Sets the end angle or end angle accessor for the ribbon generator.

# Ribbon.radiusnumber | NumAccessor | undefinedoptional

Sets the radius or radius accessor for the ribbon generator.

# Ribbon.source((d: Chord) => ChordSubgroup) | undefinedoptional

Sets the source accessor (defaults to chord.source).

# Ribbon.startAnglenumber | NumAccessor | undefinedoptional

Sets the start angle or start angle accessor for the ribbon generator.

# Ribbon.target((d: Chord) => ChordSubgroup) | undefinedoptional

Sets the target accessor (defaults to chord.source).