Re: zoomable sunburst d3 chart with react. Zoom in feature not working

[Darren G]

Well. If you want anyone to debug your work you're gonna have to make it easier for them. Provide a working codepen or jsfiddle.

On Fri, Aug 7, 2020, 10:51 AM arpit dadheech <arpitd...@gmail.com> wrote:

I am working on the zoomable sunburst chart in d3 with react. I have successfully done the chart implementation and transformation in the chart is working. But when I click on the zoomable feature it works but when I try to go back to initial state. It doesn't work.

chart.js

constructor(props) {
    super(props);
    this.state = { dataSunburst: dataSunburst };
  }

  onSelect = (event) => {
    this.setState({ dataSunburst: event.data });
  }
  // randomizeData() {
  //   this.setState({ data: randomDataSet() });
  // }

  render() {
    return (
      <>
      {/* <LineChart data={dataLine} width={width} height={height} /> */}
      <Sunburst 
        data={this.state.dataSunburst}
        scale="linear"
        tooltip={true}
        tooltipPosition="right"
        keyId="anagraph"
        width={width}
        height={height}
        onSelect={this.onSelect}
        tooltipContent={ <span class="sunburstTooltip" style="position:absolute; color:'black'; z-index:10; background: #e2e2e2; padding: 5px; text-align: center;" /> }
      />
    </>
    )
  }

sunburst.js

import React from "react";
import * as d3 from 'd3';
// import isEqual from 'lodash.isequal';

class Sunburst extends React.Component {
  componentDidMount() {
      this.renderSunburst(this.props);
  }
  componentWillReceiveProps(nextProps) {
      // if (!isEqual(this.props, nextProps)) {
          this.renderSunburst(nextProps);
      // }
  }
  arcTweenData(a, i, node, x, arc) {  
      const oi = d3.interpolate({ x0: (a.x0s ? a.x0s : 0), x1: (a.x1s ? a.x1s : 0) }, a);
      function tween(t) {
          const b = oi(t);
          a.x0s = b.x0;  
          a.x1s = b.x1;   
          return arc(b);
      }
      if (i === 0) {
          const xd = d3.interpolate(x.domain(), [node.x0, node.x1]);
          return function (t) {
              x.domain(xd(t));
              return tween(t);
          };
      } else {  
          return tween;
      }
  }
  formatNameTooltip(d) {
      const name = d.data.name;
      return `${name}`;
  }
  labelName(d) {
      const name = d.data.name;
      return `${name}`;
  }
  labelVisible(d)<span class="pln" style="font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: ba