A React component for building D3 Chord Diagrams
npm install react-chord-diagramA React component for building D3 Chord Diagrams
[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
* Installation
* Usage
* Required Props
* Optional Props
$ npm install react-chord-diagram
``js
import ChordDiagram from 'react-chord-diagram'
const matrix = [
[11975, 5871, 8916, 2868],
[1951, 10048, 2060, 6171],
[8010, 16145, 8090, 8045],
[1013, 990, 940, 6907]
];
componentId={1}
groupLabels={['Black', 'Yellow', 'Brown', 'Orange']}
groupColors={["#000000", "#FFDD89", "#957244", "#F26223"]}
/>
`
!screenshot
- type: array of arrays
The matrix to be visualized. See D3 Chord.
example:
[
[11975, 5871, 8916, 2868],
[ 1951, 10048, 2060, 6171],
[ 8010, 16145, 8090, 8045],
[ 1013, 990, 940, 6907],
]
- type: number
A unique id for the component.
- type: number
Width of the diagram in pixels.
- type: number
Height of the diagram in pixels.
- type: object
Custom styles applied to the diagram's root div.
example:
{
font: '10px sans-serif'
}
- type: string
Custom class name applied to the root svg.
- type: number
Outer radius of the diagram in pixels.
- type: number
Inner radius of the diagram in pixels.
- type: array
List of colors, one for each group.
example:
["#000000", "#FFDD89", "#957244", "#F26223"]
- type: number
Specifies the percent of padding between arcs or groups.
default: .05
- type: function
A function that specifies how the groups should be sorted. See chord.sortGroups.
default: null
- type: function
A function that specifies how subgroups should be sorted. See chord.sortSubGroups.
default: d3.descending
- type: function
A function that specifies how chords should be sorted. See chord.sortChords.
default: d3.descending
- type: array
The color of each label in the diagram.
default: #000000
- type: boolean
Whether to hide other ribbons while mousing over a particular group or ribbon.
This overrides the individual group / ribbon hover settings.
default: false
- type: boolean
Whether to hide other ribbons while mousing over a particular group.
default: false
- type: boolean
Whether to hide other ribbons while mousing over a particular ribbon.
default: false
- type: boolean
Whether to blur other ribbons instead of hiding them on hover.
default: false
- type: boolean
If true, ribbons highlighted on hover will remain highlighted if you click on
the element causing the hover. Click anywhere on the SVG to clear this state.
default: false
- type: string
Default opacity value for ribbons.
default: '0.67'
- type: string
If blurOnHover is true, then set 'hidden' ribbons to this opacity instead of
hiding them.
default: '0.2'
- type: number
Will change the stroke width of the ribbons.
default: 1
- type: boolean
Resize the svg when the window is resized.
default: false
- type: function
A function that will happen when a group is clicked. Group index is passed to
the function.
default: null
- type: function
A function that will happen when a ribbon is clicked. Ribbon index is passed
to the function.
default: null
- type: function
A function that will happen when the background SVG is clicked. The event` is passed
to the function.
default: null
[build-badge]: https://img.shields.io/travis/user/repo/master.png?style=flat-square
[build]: https://travis-ci.org/user/repo
[npm-badge]: https://img.shields.io/npm/v/npm-package.png?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package
[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo