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

【问题标题】：d3 React JS: d3.csv is importing index.html instead of csv filed3 React JS：d3.csv 正在导入 index.html 而不是 csv 文件
【发布时间】：2018-05-08 22:08:21
【问题描述】：

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

App.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;

test.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)

【问题讨论】：

我认为它找不到 CSV 文件（即 404 错误），并且您的服务器设置为在这种情况下返回 index.html 文件（允许客户端路由的常见配置）。您在浏览器控制台中看到了什么？
浏览器控制台输出如上在console output下的我的OP中。它显示了 index.html 文件。如果找不到我的文件，它默认为索引是有道理的。但是我的文件在那里，所以我不明白为什么要这样做。
您使用的是 D3 v3/4 还是 D3 v5？
@dbconfession 抱歉，我应该更清楚一点，我的意思是“网络”选项卡。

标签： javascript reactjs csv d3.js

【解决方案1】：

先尝试导入数据：

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;

【讨论】：

在d3.csv(url)里面可以直接使用url，能不能解释一下为什么要先导入？

【解决方案2】：

csv(url) -- 这将向服务器发送请求以获取文件。

将此 test.csv 文件保存在公用文件夹中并尝试访问它 csv("/test.csv") 我试过了，效果很好。

我不确定第 2 行，下面的 csv 导入语句对我有用..

从“d3”导入 {csv}

【讨论】：

这是最好的路线。您不需要创建服务器。在我的情况下，我将 data.csv 文件保存在 react 的 public 文件夹中。然后从 d3 导入 csv 作为命名导入，我继续进行调用： >d3.csv('./data.csv').then(data => { > console.log(data) >});在此处阅读有关 public 文件夹的更多信息 - create-react-app.dev/docs/using-the-public-folder

【解决方案3】：

您最好的选择是将您的 csv 文件保存在 react 项目的公共文件夹中。这是最好的方法。 您无需创建服务器。

在我的情况下，我将 data.csv 文件保存在 react 的 public 文件夹中。我继续拨打电话：

d3.csv('./data.csv').then(data => console.log(data));

进行此调用的另一个选项是使用 %PUBLIC_URL%/data.csv，如 create-react-app 网站上所示。在此处阅读有关 public 文件夹的更多信息 - https://create-react-app.dev/docs/using-the-public-folder/

【讨论】：

【解决方案4】：

我也经历过类似的事情，从我的测试中我发现如果服务器上没有提供某些东西（在这种情况下是您的 .csv 文件），它会将未知文件路径重定向为 index.html。我不知道为什么会这样。我还没有找到在数据文件夹中提供数据的方法。一种解决方案是将数据直接存储在公用文件夹中并将其链接为“/filename.csv”或（process.env.PUBLIC_URL+“filename.csv”）在 JS 文件中。

【讨论】：