node package manager
It’s your turn. Help us improve JavaScript. Take the 2017 JavaScript Ecosystem Survey »

react-zoomable-sunburst-d3-v4

react-zoomable-sunburst-d3-v4

Sunburst component built with React. It is build upon D3 V4 and CRA

Installation

npm i react-sunburst-d3-v4

Example

import Sunburst from 'react-sunburst-d3-v4';
 
class App extends Component {
  onSelect(event){
    console.log(event);
  }
  render() {
    return (
      <div className="App">
        <Sunburst
          data={data}
          onSelect={this.onSelect}
          scale="linear"
          tooltipContent={ <div class="sunburstTooltip" style="position:absolute; color:'black'; z-index:10; background: #e2e2e2; padding: 5px; text-align: center;" /> }
          tooltip
          tooltipPosition="right"
          keyId="anagraph"
          width="480"
          height="400"
        />
      </div>
    );
  }
}
Property Type Description Working
data Array Typically same for every Sunburst Chart Yes
scale String Options: linear / exponential - Linear renders each arc with same radii, Exponential reduces gradually by SquareRoot Yes
tooltip bool Display Tooltip or not Yes
tooltipContent HTMLNode Customized Node for Tooltip rendering Yes
keyId string Unique Id for Chart SVG Yes
width Integer Width of the Chart Container Yes
height Integer Height of the Chart Container Yes

Methods

  • onSelect() - Function - Called on Arc Click for re-rendering the chart and passing back to User as props

TODO:

  1. Add Label Content & Customized Label Content

Check out the Example folder for Customized Usage