关于javascript：D3.csv无法加载csv文件


D3.csv not loading the csv file

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

这就是我的工作：

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

    1
    2
    3
    4
    5
    6
    7
    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中，以将数据打印到控制台中，检查其是否正常运行。

    1
    2
    3
    4
    5
    ...
    d3.csv("irisData.csv", type, function(error, data){
        console.log(data);
    });
    ...

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
         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文件中的数据组成的对象。像这样：

    1
    2
    3
    4
    5
    6
    [
      {data...}
      {data...}
      {data...}
      ...
    ]

    但是，我得到的是包装到对象中的irisTest.html的代码(这是html代码本身)。我意识到，在d3.csv(" irisData.csv"，...)中的路径而不是" irisData.cvs"放什么都无所谓，它总是输出我自己的代码，如下所示。因此，我认为csv文件的路径可能有问题，但事实并非如此。所有文件都在同一文件夹中。

    1
    2
    3
    4
    5
    6
    7
     [    
        ...
        {<!DOCTYPE html>:"d3.csv("irisData.csv", type, function(error, data){"}
        {<!DOCTYPE html>:"console.log(data);"}
        {<!DOCTYPE html>:"});}"}
        ...
     ]

    有人知道发生了什么吗？

    相关讨论

    如此处文档中所指定，应该使用匿名函数而不是type。 我引用文档中的示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    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文件：

    1
    2
    3
    4
    5
    d3.csv("irisData.csv",function(data){
        console.log(data);
    },function(error, rows){
       console.log(rows);
    });

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

    相关讨论