web-dev-qa-db-fra.com

cSV à tableau dans d3.js

J'utilise ceci pour analyser un fichier csv et créer un tableau de données comme spécifié dans d3 docs:

d3.csv("afile.csv", function(data) {
    data.forEach(function(d) {
    d.date = formatDate.parse(d.date);
    d.price = +d.price;
});

Cependant, si après cette méthode, j'essaie d'appeler data[0], il dit que ce n'est pas défini. Est-ce parce que data est une référence et qu'une fois que d3.csv() est hors de portée, il est détruit? Si tel est le cas, comment puis-je surmonter cela. J'ai besoin de référencer des données sur d3.csv()

csvd3.js
36
George Eracleous

d3.csv est une méthode asynchrone. Cela signifie que le code dans la fonction de rappel est exécuté lorsque les données sont chargées, mais le code après et à l'extérieur la fonction de rappel sera exécuté immédiatement après la demande, lorsque les données ne sont pas encore disponibles. En d'autres termes:

first();
d3.csv("path/to/file.csv", function(rows) {
  third();
});
second();

Si vous souhaitez utiliser les données chargées par d3.csv, vous devez soit insérer ce code dans la fonction de rappel (où third est, ci-dessus):

d3.csv("path/to/file.csv", function(rows) {
  doSomethingWithRows(rows);
});

function doSomethingWithRows(rows) {
  // do something with rows
}

Ou, vous pouvez l'enregistrer en tant que variable globale de la fenêtre à laquelle vous pourrez vous référer ultérieurement:

var rows;

d3.csv("path/to/file.csv", function(loadedRows) {
  rows = loadedRows;
  doSomethingWithRows();
});

function doSomethingWithRows() {
  // do something with rows
}

Si vous le souhaitez, vous pouvez également affecter explicitement les données chargées à l'objet window, plutôt que de déclarer une variable et de gérer ensuite deux noms différents:

d3.csv("path/to/file.csv", function(rows) {
  window.rows = rows;
  doSomethingWithRows();
});

function doSomethingWithRows() {
  // do something with rows
}
127
mbostock

Je pense que votre problème est le timing parce que c'est un appel asynchrone. Donc, chargez les données telles que vous les avez mais appelez la fonction dans le code d3 (où Mike a 'doSomethingWithRows ()'). Ne suivez pas votre code d3 avec plus de traitement (où Mike a 'second ()'), déplacez ce code dans la fonction 'doSomethingWithRows ()'. Il aura les données disponibles et c'est parti ...

3
Andrew NZ

Je pense que le problème est déjà résolu mais j’ai fait face à un problème similaire et la discussion ci-dessus n’a pas été aussi utile. Voici donc comment j'ai trouvé un moyen de résoudre ce problème: Ici, la raison pour laquelle data[0] n'est pas défini est probablement parce que les données elles-mêmes ne sont pas lues par le navigateur. Cette erreur de lecture est probablement due au chargement direct du fichier de données (csv), c’est-à-dire à l’aide de la commande suivante d3.csv("myCSVfile.csv",....). Cette approche risque de ne pas fonctionner car les applications Web nécessitent normalement le chargement de fichiers à partir de serveurs Web (vous ne savez pas pourquoi.). Un serveur Web local doit donc être mis en place. Utilisez ce forum pour apprendre comment: Comment configurer un serveur HTTP local à l’aide de Python . Le code mis à jour, si vous utilisez Python 3 pour créer un serveur Web local sera: d3.csv("http://localhost:8000/myCSVfile.csv",.....). 

0
Maneet