嘗試使用D3與React創建條形圖

Question

我正在嘗試使用我的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同樣的東西，並在我的控制台中得到類似的錯誤，無法獲取圖表來呈現。 知道問題可能是什么？

Answer 1

不確定您的第一個錯誤，但第二個錯誤可能是由於d3版本。 如果要導入最新版本的d3，則var x = d3.scale.linear()需要為var x = d3.scaleLinear() 。 有關更多信息，請參閱文檔 。

注意：我通常只是把它作為評論，因為它沒有回答整個問題我是1聲譽點，因為能夠評論抱歉。