javascript - ReactJS + D3 : Parse local CSV file and passing it to state with 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 内容。

测试.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 启动应用程序。