在 create-react-app 中使用 react-d3-components 折线图不起作用

Question

我是 react 新手，我正在尝试将 react-d3-component 放在 create-react-app 样板中。

App.js 看起来像：

import ReactD3 from 'react-d3-components';
import React from 'react';

var LineChart = ReactD3.LineChart;
var Brush = ReactD3.Brush;
var d3 = ReactD3.d3;

var App = React.createClass({
    getInitialState: function() {
        return {
            data: {label: '', values: [
                {x: new Date(2015, 2, 5), y: 1},
                {x: new Date(2015, 2, 6), y: 2},
                {x: new Date(2015, 2, 7), y: 0},
                {x: new Date(2015, 2, 8), y: 3},
                {x: new Date(2015, 2, 9), y: 2},
                {x: new Date(2015, 2, 10), y: 3},
                {x: new Date(2015, 2, 11), y: 4},
                {x: new Date(2015, 2, 12), y: 4},
                {x: new Date(2015, 2, 13), y: 1},
                {x: new Date(2015, 2, 14), y: 5},
                {x: new Date(2015, 2, 15), y: 0},
                {x: new Date(2015, 2, 16), y: 1},
                {x: new Date(2015, 2, 16), y: 1},
                {x: new Date(2015, 2, 18), y: 4},
                {x: new Date(2015, 2, 19), y: 4},
                {x: new Date(2015, 2, 20), y: 5},
                {x: new Date(2015, 2, 21), y: 5},
                {x: new Date(2015, 2, 22), y: 5},
                {x: new Date(2015, 2, 23), y: 1},
                {x: new Date(2015, 2, 24), y: 0},
                {x: new Date(2015, 2, 25), y: 1},
                {x: new Date(2015, 2, 26), y: 1}
            ]},
            xScale: d3.time.scale().domain([new Date(2015, 2, 5), new Date(2015, 2, 26)]).range([0, 400 - 70]),
            xScaleBrush: d3.time.scale().domain([new Date(2015, 2, 5), new Date(2015, 2, 26)]).range([0, 400 - 70])
        };
    },

    render: function() {
        return (
            <div>
                <LineChart
                    data={this.state.data}
                    width={400}
                    height={400}
                    margin={{top: 10, bottom: 50, left: 50, right: 20}}
                    xScale={this.state.xScale}
                    xAxis={{tickValues: this.state.xScale.ticks(d3.time.day, 2), tickFormat: d3.time.format("%m/%d")}}
                />
                <div className="brush" style={{float: 'none'}}>
                    <Brush
                        width={400}
                        height={50}
                        margin={{top: 0, bottom: 30, left: 50, right: 20}}
                        xScale={this.state.xScaleBrush}
                        extent={[new Date(2015, 2, 10), new Date(2015, 2, 12)]}
                        onChange={this._onChange}
                        xAxis={{tickValues: this.state.xScaleBrush.ticks(d3.time.day, 2), tickFormat: d3.time.format("%m/%d")}}
                    />
                </div>
            </div>
        );
    },

    _onChange: function(extent) {
        this.setState({xScale: d3.time.scale().domain([extent[0], extent[1]]).range([0, 400 - 70])});
    }
});
export default App;

index.js 看起来像：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

我已经安装了 react-d3-components 也在 package.json 中；我仍然收到如下错误：

TypeError：无法读取未定义的属性“LineChart”

此外，无论哪里有 d3.time.day，它都会显示未解析的功能。我还尝试使用其他方式导入 d3：

从 'd3' 导入 * 作为 d3。

但我仍然遇到一些不同的错误。

请提出我做错了什么，以便我可以设置我的初始代码来工作。

谢谢

Answer 1

试试这个：

import { LineChart, Brush, d3 } from 'react-d3-components';

在我看来，这些是命名导出而不是单个默认导出。

Answer 2

您可能没有正确导入 d3，这也可能导致 reactd3 导入不正确。尝试在顶部像这样导入 d3：

import d3 from 'd3';