在 React App 中使用 D3 或 Papa 讀取 CSV

Question

我想弄清楚如何從本地反應應用程序讀取本地文件。 我使用npx create-react-app my_app創建了我的反應應用程序，並使用npm start運行它。 這是引發問題的最小index.jsx文件。

import React from 'react';
import ReactDOM from "react-dom";
import * as d3 from 'd3';

class Page extends React.Component {
  render() {
    var csvFilePath = "./data/my_data.csv";
    console.log("min/index.jsx rows:");
    var csvFile = d3.csv(csvFilePath).then(function(row) {
      console.log(row);
    });

    console.log("min/index.jsx csvFile:");
    console.log("csvfile: " + csvFile);
    console.log(csvFile);
    // console.log("type: " + type(csvFile));
    console.log("min/index.jsx csvFile end");

    return (
      <div className="page-holder"></div>
    );
  }
}

ReactDOM.render(
  <Page />,
  document.getElementById('root')
);

它產生這樣的控制台日志：

index.jsx:8 min/index.jsx rows:
index.jsx:13 min/index.jsx csvFile:
index.jsx:14 csvfile: [object Promise]
index.jsx:15 Promise
index.jsx:17 min/index.jsx csvFile end
index.jsx:10 (42) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, columns: Array(1)]0: {<!DOCTYPE html>: "<html lang="en">"}1: {<!DOCTYPE html>: "  <head>"}2: {<!DOCTYPE html>: "    <meta charset="utf-8" />"}3: {<!DOCTYPE html>: "    <link rel="icon" href="/favicon.ico" />"}4: {<!DOCTYPE html>: "    <meta name="viewport" content="width=device-width"}5: {<!DOCTYPE html>: "    <meta name="theme-color" content="#000000" />"}6: {<!DOCTYPE html>: "    <meta"}7: {<!DOCTYPE html>: "      name="description""}8: {<!DOCTYPE html>: "      content="Web site created using create-react-app""}9: {<!DOCTYPE html>: "    />"}10: {<!DOCTYPE html>: "    <link rel="apple-touch-icon" href="/logo192.png" />"}11: {<!DOCTYPE html>: "    <!--"}12: {<!DOCTYPE html>: "      manifest.json provides metadata used when your web app is installed on a"}13: {<!DOCTYPE html>: "      user's mobile device or desktop. See https:/…ers.google.com/web/fundamentals/web-app-manifest/"}14: {<!DOCTYPE html>: "    -->"}15: {<!DOCTYPE html>: "    <link rel="manifest" href="/manifest.json" />"}16: {<!DOCTYPE html>: "    <!--"}17: {<!DOCTYPE html>: "      Notice the use of  in the tags above."}18: {<!DOCTYPE html>: "      It will be replaced with the URL of the `public` folder during the build."}19: {<!DOCTYPE html>: "      Only files inside the `public` folder can be referenced from the HTML."}20: {<!DOCTYPE html>: ""}21: {<!DOCTYPE html>: "      Unlike "/favicon.ico" or "favicon.ico""}22: {<!DOCTYPE html>: "      work correctly both with client-side routing and a non-root public URL."}23: {<!DOCTYPE html>: "      Learn how to configure a non-root public URL by running `npm run build`."}24: {<!DOCTYPE html>: "    -->"}25: {<!DOCTYPE html>: "    <title>React App</title>"}26: {<!DOCTYPE html>: "  </head>"}27: {<!DOCTYPE html>: "  <body>"}28: {<!DOCTYPE html>: "    <noscript>You need to enable JavaScript to run this app.</noscript>"}29: {<!DOCTYPE html>: "    <div id="root"></div>"}30: {<!DOCTYPE html>: "    <!--"}31: {<!DOCTYPE html>: "      This HTML file is a template."}32: {<!DOCTYPE html>: "      If you open it directly in the browser"}33: {<!DOCTYPE html>: ""}34: {<!DOCTYPE html>: "      You can add webfonts"}35: {<!DOCTYPE html>: "      The build step will place the bundled scripts into the <body> tag."}36: {<!DOCTYPE html>: ""}37: {<!DOCTYPE html>: "      To begin the development"}38: {<!DOCTYPE html>: "      To create a production bundle"}39: {<!DOCTYPE html>: "    -->"}40: {<!DOCTYPE html>: "  <script src="/static/js/bundle.js"></script><scr…t src="/static/js/main.chunk.js"></script></body>"}41: {<!DOCTYPE html>: "</html>"}columns: ["<!DOCTYPE html>"]length: 42__proto__: Array(0)
DevTools failed to parse SourceMap: chrome-extension://cfhdojbkjhnklbpkdaibdccddilifddb/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://ekhagklcjbdpajgpjgmbionohlpdbjgc/browser-polyfill.js.map
DevTools failed to parse SourceMap: chrome-extension://hdokiejnpimakedhajhdlcegeplioahd/sourcemaps/onloadwff.js.map

index.jsx:10 中的 42 個對象似乎是 create-react-app 的默認index.html而不是我的數據！ 他們開始了：

<html lang=\"en\">
  <head>
    <meta charset=\"utf-8\" />
    <link rel=\"icon\" href=\"/favicon.ico\" />
    <meta name=\"viewport\" content=\"width=device-width
    <meta name=\"theme-color\" content=\"#000000\" />
    <meta
      name=\"description\"
      content=\"Web site created using create-react-app\"
    />
    ...

我試圖了解這里發生了什么。 node.js 是否充當本地文件服務器並響應我的 d3.csv(...) 讀取回吐自己的 index.html？ 如果是這樣，閱讀此文件的慣用最佳方式是什么？ 如果沒有，同樣的問題。

謝謝你的幫助！

Answer 1

d3.csv異步檢索 CSV 文件。

因此，處理 CSV 文件的整個代碼應包含在.then 。

改編代碼：

class Page extends React.Component {
  render() {
    var csvFilePath = "./data/my_data.csv";
    console.log("min/index.jsx rows:");
    d3.csv(csvFilePath).then(function(csvFile) {
      console.log("min/index.jsx csvFile:");
      console.log("csvfile: " + csvFile);
      console.log(csvFile);
      // console.log("type: " + type(csvFile));
      console.log("min/index.jsx csvFile end");

      return (
        <div className="page-holder"></div>
      );
    });

  }
}

Answer 2

好吧，我想我已經破解了。

首先我嘗試導入我的數據文件：

import importedCsvData from './data/my_data.csv';
console.log("Imported Csv Data:");
console.log(importedCsvData);

這產生了日志：

Imported Csv Data: 
/static/media/my_data.6180a709.csv

似乎 node.js 想要將我的本地文件作為靜態媒體提供，我需要使用導入來獲取我自己的 node.js 服務器想要提供它的地址。 （值得注意的是，額外的字符串 '6180a709' 不會因運行而異。它似乎是一個散列，而不是一個隨機字符串）。

有了這些知識，我就能夠編寫這個組件：

import importedCsvData from './data/my_data.csv';

class Page extends React.Component {
  render() {
    var csvFilePath = importedCsvData;
    fetch(csvFilePath)
      .then(rs => rs.text())
      .then(text => {
        console.log('text:');
        console.log(text);
      });

    return null;
  }
}

最終將我的文件作為字符串讀取到text變量中。

在 React App 中使用 D3 或 Papa 讀取 CSV

問題描述

2 個解決方案

解決方案1
0 2020-03-24 09:16:43

解決方案2
0 已采納 2020-03-24 18:38:15

在 React App 中使用 D3 或 Papa 讀取 CSV

問題描述

2 個解決方案

解決方案1 0 2020-03-24 09:16:43

解決方案2 0 已采納 2020-03-24 18:38:15

解決方案1
0 2020-03-24 09:16:43

解決方案2
0 已采納 2020-03-24 18:38:15