导入 .csv 文件时反应 D3 错误 404

Question

我正在尝试使用 d3 中的 csv 在我的 Next.js 应用程序中呈现一些数据。在此tutorial 之后，我收到了 404 错误。我进行了很多搜索，正如视频中所示，可以将 csv 与 React 一起使用。这是我的代码

import {csv} from 'd3';
import datacsv from './test.csv';

class Power extends Component {
...
        componentDidMount() {

            csv(datacsv).then(data=>{
                console.log(data);
          
              });

        }
...
    

我已经仔细检查了文件的路径。

注意。 我在 StackOverflow 中看到了一些关于此主题的问题，但它们指的是 Node.js 或没有得到解答。

Answer 1

d3.csv 期望传递一个 URL，而不是文件路径或模块。

您可以将test.csv 文件移动到您的public/ 文件夹中，以便为d3.csv() 提供一个有效位置以从中获取数据，然后指向它。

import { csv } from 'd3';

class Power extends React.Component {
    // ...
    csv('/test.csv').then((data) => {
        console.log(data);
    });
    // ...
}

---

或者，如果您想从 Next.js 应用程序的文件系统中读取 .csv 文件，则需要安装 csv-loader 并将其添加到您的 next.config.js 的 webpack 配置中。

$ npm install csv-loader

// next.config.json

module.exports = {
    webpack: (config) => {
        config.module.rules.push({
            test: /\.csv$/,
            loader: 'csv-loader',
            options: {
                dynamicTyping: true,
                header: true,
                skipEmptyLines: true
            }
        });

        return config;
    }
};

然后您可以直接加载test.csv 文件，而无需使用d3.csv。

import datacsv from './test.csv';

class Power extends React.Component {
    // ...
    componentDidMount() {
        console.log(datacsv);
    }
    // ...
}