Convertir le csv en tableau dans d3.js

Question

Je l'utilise pour analyser un fichier csv et créer un tableau de données tel que spécifié dans la documentation de d3 :

d3.csv("unfichier.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 indique qu'il est indéfini. Est-ce parce que data est une référence et qu'une fois d3.csv() hors de portée, il est détruit ? Si c'est le cas, comment puis-je surmonter cela ? J'ai besoin de faire référence aux données en dehors de d3.csv()

Answer 1

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

first();
d3.csv("chemin/vers/fichier.csv", function(rows) {
  third();
});
second();

Si vous souhaitez utiliser les données chargées par d3.csv, vous devez soit mettre ce code à l'intérieur de la fonction de rappel (où se trouve third, ci-dessus) :

d3.csv("chemin/vers/fichier.csv", function(rows) {
  faireQuelqueChoseAvecLesLignes(rows);
});

function faireQuelqueChoseAvecLesLignes(rows) {
  // faire quelque chose avec les lignes
}

Ou vous pouvez les enregistrer en tant que variable globale sur la fenêtre à laquelle vous pourrez ensuite vous référer ultérieurement :

var lignes;

d3.csv("chemin/vers/fichier.csv", function(lignesChargées) {
  rows = lignesChargées;
  faireQuelqueChoseAvecLesLignes();
});

function faireQuelqueChoseAvecLesLignes() {
  // faire quelque chose avec les lignes
}

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

d3.csv("chemin/vers/fichier.csv", function(rows) {
  window.rows = rows;
  faireQuelqueChoseAvecLesLignes();
});

function faireQuelqueChoseAvecLesLignes() {
  // faire quelque chose avec les lignes
}

Answer 2

Je pense que votre problème est lié au timing car il s'agit d'un appel asynchrone. Donc, chargez les données comme vous le faites habituellement mais appelez la fonction à l'intérieur du code d3 (là où Mike a 'doSomethingWithRows()'). Ne suivez pas votre code d3 avec d'autres traitements (là où Mike a 'second()'), déplacez ce code dans la fonction 'doSomethingWithRows()'. Les données seront disponibles et vous pourrez continuer...

Answer 3

Je pense que le problème est déjà résolu mais j'ai rencontré un problème similaire et la discussion ci-dessus n'a pas été aussi utile. Je partage donc comment j'ai trouvé une solution à ce problème: Ici, la raison pour laquelle data[0] est indéfini est probablement parce que les données elles-mêmes ne sont pas lues par le navigateur. Cette impossibilité de lecture est probablement due au chargement direct du fichier de données (csv), c'est-à-dire en utilisant la commande suivante d3.csv("monFichierCSV.csv",....). Cette approche peut ne pas fonctionner car les applications web nécessitent généralement le chargement de fichiers à partir de serveurs web (je ne sais pas pourquoi c'est le cas). Il est donc nécessaire de mettre en place un serveur web local. Utilisez ce forum pour apprendre comment faire: Comment configurer un serveur HTTP local en utilisant Python. Le code mis à jour, si vous utilisez Python 3 pour créer un serveur web local, sera : d3.csv("http://localhost:8000/monFichierCSV.csv",.....).

Answer 4

Dans le callback then(function(data)), vous obtiendrez le tableau complet.

d3.csv("afile.csv", function(row) {
  return {name1: row.name1, name2: row.name2, ...}
}).then(function(d){
   console.log(d) // => [{{name1: row.name1, name2: row.name2, ...}}, {name1: row.name1, name2: row.name2, ...} ....]
});

Answer 5

Vous pourriez déclarer une variable en dehors de la fonction de rappel et ensuite lui attribuer les valeurs du csv :

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

et ensuite utiliser csv_data en dehors de la fonction de rappel