将数据导入反应应用程序以进行绘图

Question

所以我一直在努力将 CSV 数据导入到我的反应应用程序中，以便使用 deck.gl 绘制它 到目前为止，这是我尝试过的几件事：

将数据加载为 CSV 文件。 为此，我编写了这段代码来加载文件：

import * as fs from 'fs';
import * as CSVreader from 'csv-reader';

export async function LoadVertexData() {
    let inputStream = fs.createReadStream('../data/vertices.csv', 'utf8');
    inputStream
        .pipe(new CSVreader({ parseNumbers: true, parseBooleans: true, trim: true }))
        .on('data', function (row) {
            console.log('A row arrived: ', row);
        })
        .on('end', function () {
            console.log('No more rows!');
        });
    return "YEET";
}

在这种情况下，我只是被告知 fp.createReadStream 不是函数

所以我尝试加载 JSON 数据。使用这段代码：

export async function LoadJsonData(){
    const rawData = await fetch('../data/RestructuredDataExample.json');
    const rawDataParsed = await rawData.json();

    console.log(rawDataParsed.length);

    return rawDataParsed;
}

这告诉我“未捕获（承诺中）SyntaxError: Unexpected token

{"nodes": [
{"id": 32470, 
"label": "SomethingSomething", 
"xpos": 1954.292236328125, 
"ypos": -620.9590454101562, 
"modularityClass": 14, "color": 
"rgb(115,192,0)", 
"size": 10.0}, ...]}

这对我来说完全没有意义，此时我很困惑，非常感谢任何帮助。

Answer 1

所以我通过编辑 hte 行来解决这个问题

const rawData = await fetch('../data/RestructuredDataExample.json');

在 react 或 webpack 中，您不想升级并想使用 'public/' 文件夹中的任何内容