时间戳

首页 > 解决方案 > d3 React JS：d3.csv 正在导入 index.html 而不是 csv 文件

javascript - d3 React JS：d3.csv 正在导入 index.html 而不是 csv 文件

问题描述

我正在尝试在我的 react App.js 文件中使用 d3-request 库来导入和解析 .csv 文件中的数据。当我将结果数据输出到控制台时，它会从 App.js 文件而不是目标 csv 文件返回一组行。我错过了什么？

应用程序.js

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

const API_URL = "https://nataliia-radina.github.io/react-vis-example/";

class App extends Component {
   constructor(props) {
      super(props)
       this.state = {
          results: [],
       };
   }
   render() {
      csv("./data/test.csv", function(error, data) {
         if (error) throw error;
         console.log(data);
       });

      const {results} = this.state;

      return (
         <div className="App">
            <Chart data={results}
             />
        </div>
      );
    }
}

export default App;

测试.csv

col1,col2,col3
hi,there,buddy

 控制台输出

(39) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, columns: Array(1)]
0:{<!DOCTYPE html>: "<html lang="en">"}
1:{<!DOCTYPE html>: "  <head>"}
2:{<!DOCTYPE html>: "    <meta charset="utf-8">"}
3:{<!DOCTYPE html>: "    <meta name="viewport" content="width=device-width"}
4:{<!DOCTYPE html>: "    <meta name="theme-color" content="#000000">"}
5:{<!DOCTYPE html>: "    <link rel="manifest" href="/manifest.json">"}
6:{<!DOCTYPE html>: "    <link rel="shortcut icon" href="/favicon.ico">"}
7:{<!DOCTYPE html>: "    <title>React App</title>"}
8:{<!DOCTYPE html>: "  </head>"}
9:{<!DOCTYPE html>: "  <body>"}
10:{<!DOCTYPE html>: "    <noscript>"}
11:{<!DOCTYPE html>: "      You need to enable JavaScript to run this app."}
12:{<!DOCTYPE html>: "    </noscript>"}
13:{<!DOCTYPE html>: "    <div id="root"></div>"}
14:{<!DOCTYPE html>: "  <script type="text/javascript" src="/static/js/bundle.js"></script></body>"}
15:{<!DOCTYPE html>: "</html>"}
columns:["<!DOCTYPE html>"]
length:39
__proto__:Array(0)

标签： javascriptreactjscsvd3.js

解决方案

尝试先导入数据：

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

const API_URL = "https://nataliia-radina.github.io/react-vis-example/";

class App extends Component {
   constructor(props) {
      super(props)
       this.state = {
          results: [],
       };
   }
   render() {
      csv(data, function(error, data) {
         if (error) throw error;
         console.log(data);
       });

      const {results} = this.state;

      return (
         <div className="App">
            <Chart data={results}
             />
        </div>
      );
    }
}

export default App;

推荐阅读