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

Posted 2023-02-22

【中文标题】将数据导入反应应用程序以进行绘图

【英文标题】：Importing data into a react app for plotting

【发布时间】：2021-12-30 17:33:15

【问题描述】：

所以我一直在努力将 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, ...]

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

【问题讨论】：

你试过这个***.com/questions/37269808/…

【参考方案1】：

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

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

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