React+D3.js导入本地CSV文件返回undefined问题求助

问题原因 #

在React项目中，直接用d3.csv('testData.csv')无法正确读取src文件夹内的CSV文件：

• React的构建工具（如Webpack）不会将src目录下的非代码文件作为可直接访问的静态资源，发起HTTP请求时会找不到文件，最终导致返回undefined。
• 教程中使用的是远程CSV链接，属于HTTP请求可直接访问的资源，因此能正常工作。

解决方案 #

方案1：将CSV文件移至public文件夹 #

1. 把testData.csv从src文件夹移动到项目根目录的public文件夹中。
2. 修改代码中的请求路径为根路径：

import React, { useEffect } from "react";
import * as d3 from "d3";

function App() {
  const createGraph = async () => {
    try {
      // 路径指向public文件夹下的CSV文件
      let data = await d3.csv('/testData.csv');
      const parseTime = d3.timeParse("%Y-%m-%d");
      data.forEach((d) => {
        d.date = parseTime(d.date);
        d.value = +d.value;
      });
      console.log(data);
    } catch (err) {
      console.error('读取CSV失败:', err);
    }
  }

  useEffect(() => {
    createGraph();
  }, []);

  return <></>;
}

export default App

方案2：通过import导入CSV文件并解析 #

1. 保持CSV文件在src文件夹中，直接导入文件内容后用d3.csvParse解析：

import React, { useEffect } from "react";
import * as d3 from "d3";
// 导入src文件夹中的CSV文件
import csvText from './testData.csv';

function App() {
  const createGraph = () => {
    try {
      // 解析导入的CSV文本内容
      let data = d3.csvParse(csvText);
      const parseTime = d3.timeParse("%Y-%m-%d");
      data.forEach((d) => {
        d.date = parseTime(d.date);
        d.value = +d.value;
      });
      console.log(data);
    } catch (err) {
      console.error('解析CSV失败:', err);
    }
  }

  useEffect(() => {
    createGraph();
  }, []);

  return <></>;
}

export default App

注：如果使用此方法遇到编译错误，需确保项目配置支持导入CSV文件，可在webpack.config.js中添加csv-loader，或在Create React App项目中通过craco.config.js配置相应规则。

额外提示 #

• 加入try-catch块能捕获读取或解析过程中的错误，方便排查问题。
• 确认testData.csv格式正确，第一行需为表头（如date,value），示例格式如下：

date,value
2023-01-01,10
2023-01-02,20
2023-01-03,15

内容的提问来源于stack exchange，提问作者user2133561