Question

我无法在带有本地CSV文件的React-vis中生成图表。

该应用是使用“ create-react-app”生成的。用d3模块解析的本地CSV文件。

data / test.csv

  'title', 'A', 'B'
  'E01', 1, 0
  'E02', 5, 0
  'E03', 10, 2

App.js

import React, {Component} from 'react';
import './App.css';
import Chart from './components/Chart';
import {csv} from 'd3-request';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillMount() {
    csv('./data/test.csv', (error, data) => {
      if (error) {
        this.setState({loadError: true});
      }
      this.setState({
        data: data.map(d => ({...d, x: Number(d.title), y: Number(d.A)}))
      });
    })
  }

  render() {

    if (this.state.loadError) {
      return <div>couldn't load file</div>;
    }

    if (!this.state.data) {
      return <div />;
    }

    return ( 

      <div className="App">
        <Chart data={this.state.data}/>
      </div>

    )
  }

}

export default App;

Chart.js

import React from 'react';
import {XYPlot, XAxis, YAxis, VerticalGridLines, HorizontalGridLines, LineSeries} from 'react-vis';

const Chart = (props) => {


  const dataArr = props.data
  console.log(dataArr);

  return (
      <XYPlot
          //xType="ordinal"
          width={1000}
          height={500}>
          <XAxis />
          <YAxis />
          <VerticalGridLines />
          <HorizontalGridLines />
          <LineSeries
                  data={dataArr}
                  style={{stroke: 'violet', strokeWidth: 3}}/>
      </XYPlot>
  );
}

export default Chart;

页面为空白，console.log返回页面的HTML结构。错误消息：

index.js：2178警告：无法提供无状态功能组件   裁判尝试访问此引用将失败。

检查XYPlot的渲染方法。       在XAxis中（在Chart.js：15）       在svg中（由XYPlot创建）       在div中（由XYPlot创建）       在XYPlot中（在Chart.js：11）       在图表中（在App.js：40）       在div中（在App.js：39）       在App中（在index.js：7）

该图表适用于伪造数据。

Eg. { x: 1, y:0, x:10, y:5 }

React-vis +本地CSV：创建数据可视化时出错

0 个答案: