反応-d3を使用したプロットグラフ

Question

react-d3-componentsを使用しているデータのヒストグラムを作成しようとしています。私が持っているコードは、上記のコードでは、この

import React, { Component } from 'react'; 
import * as d3 from 'd3'; 
import * as ReactD3 from 'react-d3-components'; 
import propTypes from 'prop-types'; 
var axios=require('axios'); 
var BarChart=ReactD3.BarChart; 

class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state={ 
     data:[], 
     label:'', 
     values:[], 
     x:'', 
     y:'' 
    } 
    } 

    componentDidMount(){ 
    this.loadData(); 
    } 

    loadData(){ 

     var me=this; 
     axios({ 
      method:'GET', 
      url:'https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=SPY&apikey=2QEL3WC4KITIBISR', 
     }).then(function(response){ 

      var values=[]; 
      var data=[]; 
      Object.keys(response.data['Monthly Time Series']).forEach(function(k){ 
      var y=response.data['Monthly Time Series'][k]["1. open"]; 

      me.setState({ 
       label:k, 
       x:k, 
       y:y 
      }) 


      }) 
      values.push({"x":me.state.x,"y":me.state.y}); 
      data.push({"label":me.state.x,"values":values}); 
         me.setState({ 
       data:data 
      }) 
      console.log(me.state.data); 

     }).catch(function(error){ 
      console.log(error); 
     }) 
    } 


    render() { 

    return (
     <div> 
     <BarChart data={this.state.data} width={100} height={100}/> 
     </div> 
    ) 
    } 
} 

App.propTypes={ 
    values:React.PropTypes.array 

} 

export default App; 

のように、私はこのエラーに

を取得している私が言及していますドキュメントは、c onsole.log(me.state.data)にデータのthis

値ですこの[{...}]

0 
: 
label 
: 
"2000-02-29" 
values 
: 
Array(1) 
0 
: 
{x: "2000-02-29", y: "139.8000"} 
length 
: 
1 
__proto__ 
: 
Array(0) 
__proto__ 
: 
Object 
length 
: 
1 
__proto__ 
: 
Array(0) 

Answer 1

グラフの必要に応じてデータ形式を操作すると問題があるようです。私はまだそれをテストしていないが、これは動作するはずです。

class App extends Component { 
    state = { 
    label: 'Monthly Dates', 
    values: [] 
    }; 

    componentDidMount() { 
    this.loadData(); 
    } 

    loadData() { 
    axios({ 
     method: 'GET', 
     url: 'https://www.alphavantage.co/query?function=TIME_SERIES_MONTHLY&symbol=SPY&apikey=2QEL3WC4KITIBISR' 
    }) 
     .then(function(response) { 
     const values = []; 
     if (response && response.data && response.data['Monthly Time Series']) { 
      Object.keys(response.data['Monthly Time Series']).forEach((keys) => { 
      if (keys) { 
       const pointValue = { 
       x: String(keys), 
       y: Number(response.data['Monthly Time Series'][keys]['1. open']) 
       } 
       values.push(pointValue); 
      } 
      }); 
      this.setState({values}); 
     } 
     }) 
     .catch(function(error) { 
     console.log(error); 
     }); 
    } 

    getGraphData() { 
    const { label, values } = this.state; 
    return [{ label, values }] 
    } 

    renderGraph() { 
    if (this.state.values && this.state.values.length) { 
     return (
     <BarChart 
      data={this.getGraphData()} 
      width={1000} 
      height={400} 
      margin={{top: 10, bottom: 50, left: 50, right: 10}} 
     /> 
    ); 
    } 
    return ''; 
    } 

    render() { 
    return (
     <div> 
     {this.renderGraph()} 
     </div> 
    ) 
    } 
} 

UPDATE：また、あなたのBarChartコントロールそれまではデータをレンダリングしてはならない存在ではありません。 BarChartは以下のような有効なデータ形式を想定しています。

[{ 
    label: 'somethingA', 
    values: [{x: 'SomethingA', y: 10}, {x: 'SomethingB', y: 4}, {x: 'SomethingC', y: 3}] 
}];