Trying to use D3 with React to create a histogram
I am trying to make a simple bar chart using D3 in my web application that uses React for its frontend.
I'm new to D3 and I'm in a serious crisis to get the chart displayed on my webpage, so I figured the easiest thing for me would be to find a jsfiddle that displays a simple bar chart using D3 ( http: // jsfiddle .net / tommy351 / P4Z75 / ) and copy and paste the code into my dashboard.tsx file.
Note. The reason I chose D3 is because other, easier-to-use graphics libraries that integrate more seamlessly with React (like recharts, react-d3) don't have TypeScript definition files.
So here's a snippet of my dashboard.tsx file:
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>
);
}
}
There are errors in my console:
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
I tried the same thing with several jsfiddles and got similar errors in my console and couldn't get the graphics to render. Any idea what the problem might be?
source to share
Not sure about your first error, but the second might be due to version d3. If you are importing the latest version of d3 then there var x = d3.scale.linear()
should be var x = d3.scaleLinear()
. See the docs for more information .
Note. I usually just put this as a comment as it doesn't answer the whole question as I am one point of reputation shy about being able to comment on an apology.
source to share