Chart in d3js Not Showing Up in React App

To ensure the rendering of a D3 pie chart within a React component, a series of adjustments needs to be done. Here’s a breakdown of the modifications:

• Using the useEffect hook ensures the execution of the D3 code for pie chart creation when the React component mounts.
• Buttons are provided for switching between different datasets (data1 and data2), triggering the update of the pie chart accordingly.
• D3 functions (d3.select, d3.pie, etc.) are used to generate and update the pie chart within the React component.

This approach helps the integration of D3 visualization within a React component, efficiently managing SVG creation and updates based on React’s lifecycle, utilizing hooks such as useEffect and useRef.

import * as d3 from 'd3';
import * as React from 'react';
import { useEffect, useRef } from 'react';

const PieChart = () => {
    const ref = useRef(null);

   useEffect(() => {
        if (!ref.current) return;

        const width = 450,
                   height = 450,
                   margin = 40;
        const radius = Math.min(width, height) / 2 - margin;

        const color = d3.scaleOrdinal()
            .domain(["a", "b", "c", "d", "e", "f"])
            .range(d3.schemeDark2);

        const svg = d3.select(ref.current)
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", `translate(${width / 2}, ${height / 2})`);

        const data1 = { a: 9, b: 20, c: 30, d: 8, e: 12 };
        const data2 = { a: 6, b: 16, c: 20, d: 14, e: 19, f: 12 };

        // Call the update function here after it's defined
        update("data1");
    }, []);

     const update = (data) => {
        if (data == "data1") {
            data = data1;
        } else {
            data = data2;
        }

        // Compute the position of each group on the pie:
        const pie = d3.pie()
        .value(function(d) {return d[1]; })
        .sort(function(a, b) { return d3.ascending(a.key, b.key);} ) // This ensures that group order remains the same in the pie chart
        const data_ready = pie(Object.entries(data))

        // map to data
        const u = svg.selectAll("path").data(data_ready)

        // Building the pie chart involves creating paths for each segment using the arc function.
        u
          .join('path')
          .transition()
          .duration(1000)
          .attr('d', d3.arc().innerRadius(0).outerRadius(radius))
          .attr('fill', function(d){ return(color(d.data[0])) })
          .attr("stroke", "white")
          .style("stroke-width", "2px")
          .style("opacity", 1)
    }

    return (
        <div ref={ref}>
            <button onClick={() => update("data1")}>Data 1</button>
            <button onClick={() => update("data2")}>Data 2</button>
        </div>
    );
};

export default PieChart;