reactjs - 如何在反应中使用 D3.js

Question

我想在我的 ReactJS 应用程序中使用 D3 绘制图表。我观看了一些 youtube 视频并阅读了网络上的一些教程，但没有任何帮助。每次出现错误或我看不到结果。这是我最新的代码。这段代码没有错误，但我只能看到一些没有我试图绘制的圆环图的数字。

import React from 'react';
import {withStyles} from '@material-ui/core/styles';
import { arc as d3Arc, pie as d3Pie } from 'd3-shape';
import { csvParse } from 'd3-dsv';
import * as d3 from 'd3';
import dataCsv from '../../static/book1.csv';

const styles  = theme =>({
    arc:{
        background:'red',
        fill:'blue',
        color:'red',
    }
});

const width = 500,
  height = 500,
  radius = Math.min(width, height) / 2;

  const color = d3.scaleOrdinal().range([
    '#98abc5',
    '#d0743c',
  ]);


  const arc = d3.arc()
  .outerRadius(radius - 10)
  .innerRadius(radius - 70);

const pie = d3Pie().sort(null).value(function(d) {
    return d.population;
  });

const data = pie(
  csvParse(dataCsv, d => {
    d.population = +d.population;
    return d;
  })
);


class DonutChart extends React.Component{
    constructor(){
        super();
    }
    render(){
        const {classes} = this.props;
        return(
            <svg width={width} height={height}>
                <g transform={`translate(${width / 2}, ${height / 2})`}>
                    {data.map(d =>(
                    <g className={classes.arc} key={`a${d.type}`}>
                        <path d={arc(d)} fill={color(d.color)} />
                        <text transform={`translate(${arc.centroid(d)})`} dy=".35em">
                        {d.value}
                        </text>
                    </g>
                    ))}
                </g>
            </svg>
        );
    }
}

export default withStyles(styles)(DonutChart);

标签： reactjsd3.js