尝试使用 javascript/D3 解析 csv 时出现 404 错误答案

【问题标题】：404 error trying to parse csv with javascript/D3尝试使用 javascript/D3 解析 csv 时出现 404 错误
【发布时间】：2014-09-29 06:06:20
【问题描述】：

我正在尝试解析 Angular/Sinatra 项目中的本地 csv 文件 - 最好使用 D3，但也尝试过 HTML5 文件 API、Papa.parse 和 ajax 调用。但是，我不断收到 ajax、d3 和 HTML5 的 404 错误，以及 Papa 的空数据集。该文件与 application.js 文件夹保存在同一级别。

谁能告诉我为什么？

这是我的代码，包括我尝试过的许多不同的东西：

application.js：

 angular.module('Project', ['ngRoute', 'ngResource'])

 .config(function($routeProvider) {
     $routeProvider

     // route for the calculator page
     .when('/', {
         templateUrl: 'partials/display.html',
         controller: 'displayController'
     })
    // tried giving the csv a route to link to but this didn't work
    .when('/data', {
         templateUrl: 'partials/dataset.csv',
         controller: 'dataController'
     })
 })

 .controller('displayController', function($scope, $http) {
  var dataset

  // this gives a 404 error
  d3.csv('challengedataset.csv', function(data) {
    dataset = data;
  })

  // these give an empty datset
  var results = Papa.parse("challenge-dataset.csv", function(data) {
   dataset = data
 });

  Papa.parse('challenge-dataset.csv', {
    worker: true,
    step: function(row) {
      dataset = row
    },
    complete: function() {
     console.log("All done!");
    }
 });

// these gave me a 404 error
var reader = new FileReader();
reader.onload = function(e) {
  var text = reader.result;
}
var dataset = reader.readAsText('challenge-dataset.csv');
 })

$.ajax({
    type : 'GET',
    dataType : 'json',
    url: 'challenge-dataset.csv',
    success : function(data) {
      dataset = data
    } 
});

console.log(dataset)

【问题讨论】：

很抱歉问了一个明显的问题，但您是从 Web 服务器提供数据吗？
尝试在 ajax url 中使用前导 /。
我是一个相对初学者，所以如果这不是很清楚，我很抱歉 - 我已将它保存在与应用程序的其余部分相同的目录中，并已在索引中要求它.html 文件。由于 index.html 文件正在被提供，并且它包含在其中，我认为它也在被提供？
我有许多应用程序下载 csv 文件，其中的 ajax 代码与您的代码非常相似（数据类型除外） - 所以我的猜测是路径错误。您是否在控制台中检查了网络以查看发生了什么？您应该能够在响应中看到 csv 数据。如果它到达那里。
以前它给我一个 404 错误，但现在我已经更新到（大概）正确的路径，并且 console.log(dataset) 返回“未定义”。你知道我该如何调试那个吗？

标签： javascript html angularjs csv d3.js

【解决方案1】：

这可能与 d3 异步处理 .csv 调用有关。你见过this response by Mike Bostock吗？基本上，d3.csv 调用中的代码最后运行（以防止冻结）。如果您需要将该数据捕获到 DOM 中，则需要在 d3.csv 调用本身中进行。 API 了解更多信息。

        //1. code stuff

        d3.csv("your file.csv", function(d) {
            //2. bunch of other code
        })

        //3. a third set of code stuff

所以上面会运行 1-3-2。

【讨论】：

谢谢 - 我确实阅读了回复，发现它很有帮助。不幸的是，我认为我的问题可能比这更基本，因为我似乎在简单地访问文件时遇到了麻烦。由于我在 d3 函数之外定义了 var 数据集，所以它应该处理异步调用，对吧？
仔细观察，使用 d3.csv 方法（一旦我修复了路径），看起来我实际上是从数组中返回数据。所以这绝对是一个异步问题。感谢您建议我再看看这个！

【解决方案2】：

如果你给Papa Parse一个URL，你需要在配置中设置download: true，否则它认为你给它的字符串是文字CSV值来解析。此外，您没有对结果做任何有用的事情。试试这样的：

Papa.parse('challenge-dataset.csv', {
    worker: true,
    download: true,
    step: function(row) {
      console.log(row);
      dataset = row
    },
    complete: function() {
     console.log("All done!");
    }
 });

这里我们只是将每一行打印到控制台，所以如果您将它用于大文件，请小心！但至少它是你可以尝试调试的东西。您可以尝试让preview: 10 限制调试时解析的行数。

【讨论】：