我遇到有关在我的react.js应用程序中正确导入d3.js库的问题。我正在使用 import *作为'd3'中的d3 来导入所有内容并将其保存到d3名称空间,但是遇到了一个错误-无法读取未定义的属性'category20'。关于这个问题有什么帮助吗?
点击此处查看=> 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'));
答案 0 :(得分: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()