Ошибка при импорте библиотеки D3.js в мое приложение React.js

Question

Я сталкиваюсь с проблемой правильного импорта библиотек d3.js в моем приложенииact.js.Я использую import * как d3 из 'd3' , чтобы импортировать все и сохранить его в пространстве имен d3, но получаю сообщение об ошибке - Невозможно прочитать свойство 'category20' из неопределенного .Любая помощь по этому вопросу?

Нажмите здесь, чтобы увидеть => Демо

import React from "react";
import * as d3 from "d3";
import donut from "./d3.donut.jsx";
import { render } from 'react-dom';

class PieCharts extends React.Component {
  constructor(props) {
    super(props);
  }
  componentDidMount() {
    let self = this;
    //let PieData=this.props.data;
    var getData = function() {
      var size = 4;
      var data = {};
      var text = "";
      for (var i = 0; i < size; i++) {
        data["data-" + (i + 1)] = Math.round(Math.random() * 100);
        text += "data-" + (i + 1) + " = " + data["data-" + (i + 1)] + "<br/>";
      }
      d3.select("#data").html(text);
      return data;
    };

    var chart = donut()
      .$el(d3.select("#" + self.props.id))
      .data(getData())
      .render();
  }

  render() {
    //console.log(this.props.data)
    return (
      <div>
        <div id={this.props.id} />
        <button className="btn btn-primary" onClick={this.props.clickActivity}>
          Simulate
        </button>
      </div>
    );
  }
}

render(<PieCharts />, document.getElementById('root'));

Answer 1

Его синтаксическая ошибка.Вы используете d3 v5, поэтому вам нужно следовать обновленному синтаксису

Use d3.scaleOrdinal(d3.schemeCategory20) instead of d3.scale.category20().
Use d3.pie instead of d3.layout.pie
Use d3.arc() instead of d3.svg.arc()