Trying to use D3 with React to create a bar chart

Question

I'm trying to render a simple bar chart using D3 on my web application, which uses React for its front end.

I'm new to D3 and am under a major time crunch to get a bar chart showing up on my web page, so I figured the easiest thing for me to do would be to find a jsfiddle that renders 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 charting libraries that integrate more smoothly with React (ie 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 errors I get in my console are:

 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've tried the same thing with a number of jsfiddles and get similar errors in my console and can't get the charts to render. Any idea what the problem could be?

Answer 1

Not sure about your first error but the second one could be due to the d3 version. If you are importing the latest version of d3 then var x = d3.scale.linear() needs to be var x = d3.scaleLinear() . See the docs for more information.

Note: I would normally have just put this as a comment as it doesn't answer the whole question by I am 1 reputation point shy of being able to comment sorry.