d3js 中的圖表未顯示在 React 應用程序中

Question

我正在嘗試按照此處的教程進行操作，但使用的是 React 應用程序。 圖表沒有顯示，我不確定我做錯了什么，請幫忙。 我正在使用 d3 v7 並響應 17。我沒有收到任何錯誤，但按鈕顯示，因此組件被正確調用。

這是我的組件：

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

const PieChart = (props) => {
    const ref = React.createRef()
    useEffect(() => {
      draw()
    });

    // set the dimensions and margins of the graph
    const width = 450, height = 450, margin = 40;
    // The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.
    const radius = Math.min(width, height) / 2 - margin;
    // set the color scale
    const color = d3.scaleOrdinal()
    .domain(["a", "b", "c", "d", "e", "f"])
    .range(d3.schemeDark2);
    // create 2 data_set
    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}
    const svg = d3.select(".PieChart")


    // A function that create / update the plot for a given variable:
    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 make sure 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)

        // Build the pie chart: Basically, each part of the pie is a path that we build 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)

    }
    
    const draw = () => {

        svg.append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", `translate(${width/2}, ${height/2})`);


        // Initialize the plot with the first dataset
        update("data1")
    };
    

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

export default PieChart

這是我得到的，沒有圖表

Answer 1

我認為有很多事情需要解決。 首先是ref的用法。 你必須做const ref = React.useRef()即使用useRef而不是createRef 。 此外， ref 必須設置為svg元素而不是div 。

“幾乎”工作代碼在這里。 https://codesandbox.io/s/flamboyant-heisenberg-vppny?file=/src/pie.js

我說幾乎是因為圖表不會在頁面加載時呈現！ 我不知道為什么（我對反應不是很熟悉）。 要渲染圖表，請將width或height的值從 450 更改為 451。我不知道為什么會這樣，但確實如此。

一個頁面加載了圖表，按鈕和圖表轉換工作正常。

如果您想知道如何在頁面加載時呈現圖表，請告訴我。