D3.csv 未加载 csv 文件答案

【问题标题】：D3.csv not loading the csv fileD3.csv 未加载 csv 文件
【发布时间】：2016-07-30 22:52:01
【问题描述】：

由于某种原因，我无法使用 d3.csv(...) 函数加载任何 .csv 文件。我所做的是使用上面的函数加载一个 csv 文件并将数据直接打印到控制台。

这就是我的工作：

我使用记事本创建了一个名为 irisData.csv 的文件。它包括来自https://archive.ics.uci.edu/ml/datasets/Iris的鸢尾花数据集的一些数据

sepal_length,sepal_width,petal_length,petal_width,species
5.1,3.5,1.4,0.2,Iris-setosa
4.9,3,1.4,0.2,Iris-setosa
4.7,3.2,1.3,0.2,Iris-setosa
4.6,3.1,1.5,0.2,Iris-setosa
5,3.6,1.4,0.2,Iris-setosa
5.4,3.9,1.7,0.4,Iris-setosa

我在我的 irisTest.html 中编写此代码，以将数据打印到控制台中，检查它是否正常工作。
```
...
d3.csv("irisData.csv", type, function(error, data){
    console.log(data);
});
...
```

不确定这是否相关，但无论如何我都会提出来：为了运行我的 html，我使用 Node.js 来运行服务器。这是服务器的代码，server.html：

     var http = require('http');
     fs = require('fs');
     http.createServer(function(req, res){
        fs.readFile('./irisTest.html', function(err, data){
           if(err){
              res.writeHead(500, {'Content-type': 'text/plain'});
              res.end('500 - Internal Error');
           }else{
              res.writeHead(200, {'Content-type': 'text/html'});
              res.end(data);
           }
        });
     }).listen(3000);

所以我期望控制台打印出一个由 csv 文件中的数据组成的对象。像这样的：

[
  {data...}
  {data...}
  {data...}
  ...
]

但是我得到的是我的 irisTest.html 的代码（这是 html 代码本身）包装到对象中。我意识到我放什么而不是 "irisData.cvs" 作为 d3.csv("irisData.csv", ...) 中的路径并不重要，它总是输出我自己的代码，如下所示。所以我认为这可能是csv文件的路径有问题，但不应该有。所有文件都在同一个文件夹中。

 [    
    ...
    {<!DOCTYPE html>: "d3.csv("irisData.csv", type, function(error, data){"}
    {<!DOCTYPE html>: "console.log(data);"}
    {<!DOCTYPE html>: "});}"}
    ...
 ]

有人知道发生了什么吗？

【问题讨论】：

是的，如果这不是问题，问题中仍有一些 cvs 应编辑（单击问题下方小链接中的编辑）。也许，也许您还应该在代码或数据文件目录中搜索 cvs 以查看是否是拼写错误。
我已编辑问题并查找文件名和代码中的任何拼写错误。没有找到。
您在 Node 中正确使用 D3 吗？我看不到var d3 = require("d3");。请看看这个答案：stackoverflow.com/questions/9948350/…

标签： javascript html node.js d3.js

【解决方案1】：

如文档 here 中所述，应使用匿名函数而不是 type。我引用文档中的示例：

d3.csv("example.csv", function(d) {
  return {
    year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
    make: d.Make,
    model: d.Model,
    length: +d.Length // convert "Length" column to number
  };
}, function(error, rows) {
  console.log(rows);
});

因此，在您的情况下，应该以这种方式读取 csv 文件：

d3.csv("irisData.csv",function(data){
    console.log(data);
},function(error, rows){
   console.log(rows); 
});

这是gist 中的一个工作示例，检查控制台以查看数据对象。

【讨论】：

我在 youtube 上学习了一个名为“D3 简介”的教程，d3.cvs("irisData.csv", type, function(data){..});应该管用。但是，我确实尝试了您的方法。它仍然输出和以前一样的东西，没有任何改变。