这可能是一个非常简单的事情,并且有关于此的多个问答,但我无法找到解决问题的方法。
我正在尝试使用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 app中使用d3-request读取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的方法“导入”导入数据集,然后使用D3.csv函数对其进行解析。
希望这对你有用!祝一切顺利。
编辑:我正在使用D3.js 5.5.0和React.js 16.4.1并使用Yarn启动应用程序。
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;
利用承诺将完成这项工作;)。