Блог

Я пытаюсь следовать приведенному здесь руководству, но использую приложение react. Диаграмма не отображается, и я не уверен, что я делаю неправильно, пожалуйста, помогите. Я использую d3 v7 и react 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
 

Это то, что я получаю, без графика

Я думаю, что есть немало вещей, которые необходимо исправить. Прежде всего, это использование ref . Вы должны сделать const ref = React.useRef() , т.е. использовать useRef вместо createRef . Кроме того, ссылка должна быть установлена на svg элемент, а не на div .

Здесь приведен «почти» рабочий код. https://codesandbox.io/s/flamboyant-heisenberg-vppny?file=/src/pie.js

Я говорю почти, потому что диаграмма не отображается при загрузке страницы! Я не знаю почему (я не очень знаком с react). Чтобы отобразить диаграмму, измените значение width или height с 450 на 451. Я не знаю, почему это работает, но это так.

При загрузке страницы с диаграммой кнопки и переход к диаграмме работают нормально.

Если вы выясните, как отобразить диаграмму при загрузке страницы, пожалуйста, дайте мне знать.