时间戳

首页 > 解决方案 > 导入 .csv 文件时反应 D3 错误 404

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

问题描述

我正在尝试使用csvfromd3在我的 Next.js 应用程序中呈现一些数据。按照本教程，我收到了 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 或者没有得到回答。

标签： reactjscsvwebpackd3.jsnext.js

解决方案

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);
    });
    // ...
}

或者，如果你想.csv从 Next.js 应用程序的文件系统中读取文件，你需要安装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);
    }
    // ...
}

推荐阅读