在节点控制台和WebStorm中使用d3 v5无法使d3.csv正常工作

问题描述

我整天都在尝试搜索google，并阅读了使用d3.csv（）读取数据文件的示例，但找不到真正的直接答案，没有一个可行的答案。这应该很简单。

我正在使用8.10.0版的节点我已经做了以下事情：

npm install d3
npm install fetch
npm install jsdom

我有一个本地文件“ data_stacked.csv”

group,nitrogen,normal,stress
banana,12,1,13
poacee,6,33
sorgho,11,28,12
triticum,19,1

我从以下代码开始：

var d3 = require("d3");

d3.csv("data_stacked.csv").then (function(data) {
    console.log(data)
});

当它执行时，我得到“” ReferenceError：提取未定义“ 长话短说，我经历了涉及“ fetch”，“ jsdom”和许多其他事情的种种兔子漏洞，这些都不起作用。

如果我添加行

var jsdom = require("jsdom");

我收到此错误输出：

/home/carl/WebstormProjects/node-project-2/node_modules/webidl-conversions/lib/index.js:357
    } catch {
            ^

SyntaxError: Unexpected token {
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/carl/WebstormProjects/node-project-2/node_modules/jsdom/lib/jsdom/browser/Window.js:3:27)

我使用WebStorm在node上尝试过，并直接在浏览器中打开。

长短不一是我只想能够从使用node运行的javascript程序中从本地CSV文件中获取数据。我希望找到一个可以正常工作的代码示例。我在Google上发现的所有内容似乎都没有。如果有人能指出一个简单但完整的代码示例（而不是省略一些所需上下文的代码片段），我将不胜感激。

TIA

解决方法

好的，因为我现在对此有了更好的了解，所以我在这里回答自己的问题。

d3.csv（）调用应位于客户端javascript中，例如，位于或包含在index.html（或需要在其上的任何hmtl页面）中。
如果您指定本地路径，例如：

d3.csv("data.csv").then(
  function(data) { ...});

浏览器可能会抱怨（在开发人员控制台中可见）类似“ URL方案必须为http或https ...”的内容-这是一项安全功能。

简便的解决方法是使用简单的python服务器：

python -m SimpleHTTPServer <port> &

其中没有保留任何其他用途的端口号，例如3001，然后在浏览器地址栏中输入：

localhost:3001

另一方面，如果要使用nodejs，请在index.js文件中添加以下行：

const dataPath = __dirname + '/data.csv';
app.get ('/data.csv',function(req,res) { res.sendFile(dataPath); });

以上假设您已将“ app”设置为“ express”实例。看来客户端d3.csv（）路径中的文件路径应该是'/data.csv'而不仅仅是'data.csv'

csv csv fetch