arbaazdossani / react-zoomable-sunburst-d3-v4

Zoomable Sunburst React Component (D3 V4) with update functionality

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

Demo

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
2. UI UX improvements
3. Add Color and Label options from user input props
4. Smooth animation on Click
5. D3 Bar Charts Addition
6. Bar charte line chart, pie chart, multiple line graphs

Check out the Example folder for Customized Usage

react-zoomable-sunburst-d3-v4's Issues

React Native support

I dont know how to use sunbrust in react native android and ios.Can you please help me to solve this.If i any related link that may be useful for me.Thanks in advance.

Throws Warning: Expected server HTML to contain a matching <div> in <div>

Throws Warning: Expected server HTML to contain a matching

in

. It seems to be also adding an element outside of the component that it was originally included in. For example, I included it in a component with class . An empty component called is created outside of this.

<App> == $r <div className="text-center"> <svg style={width: 480, height: 400} id="undefined-svg" /> </div> </App>

Target container is not a DOM element

I insstalled sunburst but when I use it on the page I get the following error:
invariant.js:42 Uncaught Error: _registerComponent(...): Target container is not a DOM element. at invariant (invariant.js:42) at Object._renderNewRootComponent (ReactMount.js:308) at Object._renderSubtreeIntoContainer (ReactMount.js:399) at Object.render (ReactMount.js:420) at Object../node_modules/react-sunburst-d3-v4/lib/index.js (index.js:222) at __webpack_require__ (bootstrap:709) at fn (bootstrap:94) at Object../src/app/index.js (index.js:10) at __webpack_require__ (bootstrap:709) at fn (bootstrap:94)``

Source is not in location expected by react-scripts

The file [git_root]/example/Sunburst.js is expected at the location [git_root]/src/index.js.

Running npm run build will not work as expected.

How do I add labels and change the colors?

Is there a way to add labels and change the colors?

How to customize it?

When i am trying to access the Sunburst file (added in your example folder), it is showing error "TypeError: fs.readdirSync is not a function".
Any help would be really helpful..
Thanks!

Renders on import

react-zoomable-sunburst-d3-v4/lib/index.js

Line 222 in 9b23255

_reactDom2.default.render(_react2.default.createElement(App, null), document.getElementById('root'));

This will immediately attempt to render the component when the module is imported.