ReactJS + D3：解析本地CSV文件，并通过d3-request将其传递到状态

Question

这可能是一件非常简单的事情，对此有很多问答，但是我找不到解决问题的方法。

我正在尝试使用d3-request模块解析整个CSV文件，并在React组件中使用此数据设置状态。根据我的理解，d3-request模块一个一个地解析CSV文件的每一行，所以我不能简单地这样做：

import {csv} from 'd3-request';

  componentWillMount() {
    csv('./data/test.csv', (error, data) => {
      if (error) {
        this.setState({loadError: true});
      }
      this.setState({
        data: data
      });
    })
  }

所以我想改为这样做。“ ...”或传播语法有助于复制每个数组。

  componentWillMount() {
    csv('./data/elements-by-episode.csv', (error, data) => {
      if (error) {
        this.setState({loadError: true});
      }
      this.setState({
        data: data.map(d => ({...d}))
      });
    })
  }

  render() {
    console.log(this.state.data);
  }

但是console.log会打印出页面本身的html内容。

test.csv

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

希望在解析后将CSV转换为此：

this.state.date = [
  ['title', 'A', 'B'],
  ['E01', 1, 0],
  ['E02', 5, 0],
  ['E03', 10, 2]
];

编辑：

似乎最初的问题是在React应用中使用d3-request读取CSV文件。

  componentWillMount() {
    csv('test.csv', (error, data) => 
      console.log(data);
    });
  }

控制台日志会打印出页面的HTML结构。

Answer 1

前段时间我遇到了同样的错误，一种解决方法如下。

import React, { Component } from 'react';
import * as d3 from 'd3';
import data from './data.csv';

d3.csv(data, function(data) { console.log(data); });

您需要首先使用React的“导入”方法导入数据集，然后使用D3.csv函数对其进行解析。

希望对你有帮助！祝一切顺利。

编辑：我正在使用D3.js 5.5.0和React.js 16.4.1，并使用Yarn启动应用程序。

Answer 2

import React, {Component} from 'react';

import './App.css';

import * as d3 from 'd3';

import data from './data_set/data.csv';

class App extends Component {

constructor(props) {
    super(props)
}

componentDidMount() {

    d3.csv(data).then(function(data) {
        console.log(data)
    }).catch(function(err) {
        throw err;
    })
}

render() {


    return ( 
             <div className = "App" >
              <div> Data Visualization </div> 
             </div>
        );
    }
}

export default App;

使用 Promise 将完成这项工作;)。