CODEWITHSUNDEEP
reactjsd3.jssunburst-diagram
Bella Yang
Bella Yang

Reputation: 1

Duplicate D3 Sunburst Chart with React JS

Two sunbursts being rendered. I am only rendering one svg, but I am not sure why I am getting duplicate sunbursts. I checked the html and I saw two g tags. I only need one g tag with all the d2 components. please check code below.

Please comment for the full code.

Upvotes: 0

Views: 246

Answers (2)

Valeron Toscano
Valeron Toscano

Reputation: 26

Wrapping the Sunburst Chart with kapsule fixes the issue and renders just one chart.

import React, { useRef } from "react";
import SunburstChart from "sunburst-chart";
import fromKapsule from "react-kapsule";

const ReactSunburst = fromKapsule(SunburstChart, {
  methodNames: ["focusOnNode"]
});

export default function Chart({ data }) {
  let chartRef = useRef();

  return (
    <ReactSunburst
      ref={chartRef}
      width={500}
      height={500}
      maxLevels={2}
      excludeRoot
      label="name"
      size="value"
      data={data}
      onClick={(node) => {
        chartRef.current.focusOnNode(node);
        // Logs info of node clicked
        console.log(node);
      }}
    />
  );
}

Upvotes: 0

Sohel Kabir Rana
Sohel Kabir Rana

Reputation: 1

I hope your problem was fixed, maybe this will help people who are facing this issue recently. I'm assuming that in your index.js file strict mode is on. just try to remove the StrictMode and render only the App, don't worry about the removal of strict mode as it's applicable only in development stage not in the production. THE REASON BEHIND DOUBLE RENDERING IS SCRICT MODE RE-RENDERS EVERY TIME, SO THAT IT HELPS THE USER TO FIND THE ERRORS PRESENT EASILY.

<React.StrictMode>
  <App />
</React.StrictMode>

Upvotes: 0

Related Questions