在我的 React.js 应用程序中导入 D3.js 库时出错
Posted
技术标签:
【中文标题】在我的 React.js 应用程序中导入 D3.js 库时出错【英文标题】:Getting error while importing D3.js library in my React.js App 【发布时间】:2019-04-23 15:17:32 【问题描述】:在我的 react.js 应用程序中正确导入 d3.js 库时遇到问题。我正在使用 import * as d3 from 'd3' 导入所有内容并将其保存到 d3 命名空间,但收到一个名为 - Cannot read property 'category20' of undefined 的错误。关于这个问题的任何帮助?
点击这里查看 => Demo
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'));
【问题讨论】:
不久前我问了rather similar question。试试看:import d3 from 'd3'
【参考方案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()
【讨论】:
谢谢@Rupesh。我的错,因为我没有检查。所以它实际上是在 D3 的版本自动从 3.5.17 更新到 5.7.0 时发生的。以上是关于在我的 React.js 应用程序中导入 D3.js 库时出错的主要内容,如果未能解决你的问题,请参考以下文章
如何在 node.js 中导入 font-awesome 以在 react.js 中使用?