@vx/chord

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

Installation

npm install --save @vx/chord

Examples

Components

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.padAnglenumberoptional

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

# Chord.sortChordsDefaultSortComporatoroptional

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

# Chord.sortGroupsDefaultSortComporatoroptional

Comparator used to sort the groups by their total outflow.

# Chord.sortSubgroupsDefaultSortComporatoroptional

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; }) => stringoptional

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

# Ribbon.classNamestringoptional

Classname to apply to the rendered <path />.

# Ribbon.endAnglenumber | NumAccessoroptional

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

# Ribbon.radiusnumber | NumAccessoroptional

Sets the radius or radius accessor for the ribbon generator.

# Ribbon.source(d: Chord) => ChordSubgroupoptional

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

# Ribbon.startAnglenumber | NumAccessoroptional

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

# Ribbon.target(d: Chord) => ChordSubgroupoptional

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