404 ошибка при попытке разобрать csv с javascript/D3

Question

Я пытаюсь разобрать локальный файл csv в проекте Angular/Sinatra - желательно с помощью D3, но также попробовал API файлов HTML5, Papa.parse и ajax вызов. Тем не менее, я продолжаю получать ошибку 404 с ajax, d3 и HTML5 и пустой набор данных с папой. Файл сохраняется на том же уровне, что и папка 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) 

Answer 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.

Answer 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!"); 
    } 
}); 

Здесь мы просто печатать каждую строку на консоль, так что будьте осторожны, если вы используете это для большого файла! Но, по крайней мере, это то, что вы можете попробовать для отладки. Вы можете попробовать что-то вроде letting preview: 10, чтобы ограничить, сколько строк анализируется при отладке.