[英]Trying to use D3 with React to create a bar chart
我正在尝试使用我的Web应用程序上的D3渲染一个简单的条形图,它使用React作为其前端。
我是D3的新手,并且正处于一个重要的时间紧迫状态,以便在我的网页上显示一个条形图,所以我认为最简单的事情就是找到一个使用D3呈现简单条形图的jsfiddle( http://jsfiddle.net/tommy351/P4Z75/ )并将代码复制并粘贴到我的dashboard.tsx文件中。
注意:我选择D3的原因是因为其他更易于使用的图表库与React(即recharts,react-d3)更加流畅地集成,因此没有TypeScript定义文件。
所以,这是我的dashboard.tsx文件的片段:
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as D3 from "d3";
var data = [4, 5, 10, 16, 23, 35];
var width = 500;
var barHeight = 20;
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, width]);
var chart = d3.select('#chart')
.attr('width', width)
.attr('height', barHeight * data.length);
var bar = chart.selectAll('g')
.data(data)
.enter()
.append('g')
.attr('transform', function (d, i) {
return 'translate(0,' + barHeight * i + ')';
});
bar.append('rect')
.attr('width', x)
.attr('height', barHeight - 1);
bar.append('text')
.attr('x', function (d) {
return x(d) - 3;
})
.attr('y', barHeight / 2)
.attr('dy', '.35em')
.text(function (d) {
return d;
});
render() {
return ( <div>
<svg id="chart"></svg>
</div>
);
}
}
我在控制台中遇到的错误是:
Uncaught ReferenceError: Chartjs is not defined
at Object.map../af (vendorReact.js:26748)
at __webpack_require__ (vendorReact.js:53)
at Object.<anonymous> (vendorReact.js:107)
at __webpack_require__ (vendorReact.js:53)
at vendorReact.js:96
at vendorReact.js:99
Dashboard.js:17482 Uncaught TypeError: Cannot read property 'linear' of
undefined
at Object.<anonymous> (Dashboard.js:17482)
at Object.<anonymous> (Dashboard.js:17721)
at Object.163 (Dashboard.js:17723)
at __webpack_require__ (vendorReact.js:53)
at Object.0 (Dashboard.js:17)
at __webpack_require__ (vendorReact.js:53)
at webpackJsonpCallback (vendorReact.js:24)
at Dashboard.js:1
我已尝试使用多个jsfiddles同样的东西,并在我的控制台中得到类似的错误,无法获取图表来呈现。 知道问题可能是什么?
不确定您的第一个错误,但第二个错误可能是由于d3版本。 如果要导入最新版本的d3,则var x = d3.scale.linear()
需要为var x = d3.scaleLinear()
。 有关更多信息,请参阅文档 。
注意:我通常只是把它作为评论,因为它没有回答整个问题我是1声誉点,因为能够评论抱歉。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.