Javascript ReactJS+；D3：解析本地CSV文件并通过D3请求将其传递给州政府

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

我正试图用d3请求模块解析整个CSV文件，并在React组件中使用该数据设置状态。据我所知，d3请求模块逐个解析CSV文件的每一行，因此我不能简单地这样做：

import {csv} from 'd3-request';

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

所以我想改做这个。“…”或spread语法有助于复制每个数组

  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请求读取CSV文件

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

---

控制台日志打印出页面的HTML结构….

我不久前遇到了相同的错误，解决方法如下

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

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

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

希望它对你有用！祝你一切顺利

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

import React，{Component}来自“React”；
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;

导入“/App.css”；
从“d3”导入*作为d3；
从“/data_set/data.csv”导入数据；
类应用程序扩展组件{
建造师（道具）{
超级（道具）
}
componentDidMount（）{
d3.csv（数据）。然后（函数（数据）{
console.log（数据）
}).catch（函数（err）{
犯错误；
})
}
render（）{
报税表（
数据可视化
);
}
}
导出默认应用程序；

---

利用承诺就能完成任务；）

如果您使用的是Create React应用程序，则有一些关于使用公用目录中的文件的特殊说明

正如Feras在他们的评论中提到的，导入会将数据与应用程序代码捆绑在一起，这可能不是您想要的

在React代码中，您需要将

process.env.PUBLIC\u URL

前置到公共目录中的文件路径。所以在你的情况下

componentWillMount() {
    csv(process.env.PUBLIC_URL+'/test.csv', (error, data) => 
      console.log(data);
    });
  }

---

谢谢，这很有帮助。告诉我，你是怎么知道这件事的？@KibongeMurphy很抱歉我反应太晚了。我认为这是因为我与D3、js和ReactJS一起为前端团队创建统计图组件，在D3.js中，您可以使用很多工具。我会说是偶然。干杯请注意，通过这种方式，您在最终react构建中包含数据，这将增加最终react生产规模。这对我不起作用。我正在使用

createreact应用程序
创建一个项目（react v16.13），谢谢！这太简单了。为什么人们需要额外的软件包：）