create-react-app内の反応-d3コンポーネントを使用して折れ線グラフが機能しない

Question

私は反応が新しく、反応-d3コンポーネントを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')); 

私はすでにインストールされている反応-D3-成分もそれがpackage.jsonにあります。

はTypeError：まだ私のようなエラーが出今までそれが未解決の機能を言いますがd3.time.dayあります。また

未定義

、のプロパティ「折れ線グラフ」を読み取ることができません。また、別の方法でd3をインポートしようとしました。

import * as d3 from 'd3'

しかし、まだいくつかの異なるエラーが発生します。

私が間違っていることを提案してください。私は最初のコードを設定することができます。 reactd3を引き起こしている可能性がありますあなたは正しくD3をインポートしていない可能性があります

おかげ

Answer 1

は、同様に不適切にインポートします。上部に次のようにD3をインポートしてみてください。

import d3 from 'd3'; 

Answer 2

が代わりにこれを試してみてください：

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

それは輸出ではなく、単一のデフォルトのエクスポートを命名されたもののように私には思えます。