web-dev-qa-db-fra.com

Importation de données à partir de plusieurs fichiers CSV dans D3

Je suis nouveau dans D3 et je viens de commencer à travailler sur un projet. Ma question est la suivante: Je souhaite importer les données de deux fichiers CSV dans D3 pour les utiliser à des fins de comparaison graphique. Les problèmes auxquels je suis confronté sont:

1.Comment importer des données à partir de plusieurs fichiers csv?.
2. Puis-je utiliser un tableau pour chaque csv ou D3 utilise-t-il un seul tableau de données global?
3.Est-il possible de choisir une certaine colonne parmi les fichiers csv à importer?

Voici un exemple, je veux importer le "oldVer" de chacun des fichiers dans des tableaux séparés, puis utiliser les 2 tableaux à utiliser. Est-ce que c'est possible dans D3 et comment?

cSV 1
time, oldVer, newVer, oldT, newT
1,180930,190394,24,59
2,198039, 159094,26,45
3,152581,194032,22,61

cSV 2
time, oldVer, newVer, oldT, newT
1,184950,180435,27,26
2,120590,129409,13,13
3,165222,182133,60,54

Encore une fois désolé pour la question idiote mais j'ai trouvé peu de retours à ce sujet. Toute aide serait appréciée.

javascriptarrayscsvimportd3.js
19
John M.

Vous appelez simplement d3.csv plusieurs fois:

d3.csv("csv1.csv", function(error1, data1) {
  d3.csv("csv2.csv", function(error2, data2) {
    // do something with the data
  });
});

Quant à votre troisième question, non, D3 analysera tout. Cependant, rien ne vous oblige à utiliser toutes les données. Si une seule colonne ne vous intéresse, utilisez-la.

13
Lars Kotthoff

Vous pouvez utiliser une d3 queue pour charger les fichiers simultanément. Un exemple;

d3.queue()
.defer(d3.csv, "file1.csv")
.defer(d3.csv, "file2.csv")
.await(function(error, file1, file2) {
    if (error) {
        console.error('Oh dear, something went wrong: ' + error);
    }
    else {
        doStuff(file1, file2);
    }
});
12
Stuart Hallows

Dans la version 5 de d3, vous pouvez utiliser Promise.all pour charger plusieurs fichiers csv. Exemple:

Promise.all([
    d3.csv("file1.csv"),
    d3.csv("file2.csv"),
]).then(function(files) {
    // files[0] will contain file1.csv
    // files[1] will contain file2.csv
}).catch(function(err) {
    // handle error here
})

Plus d'informations sur le chargement de csv dans d3 v5

Plus d'infos sur Promise.all()

12
Abang F.

La réponse de Stuart Hallows est correcte - d3.queue est utilisé dans d3 pour charger plusieurs fichiers. Je ne recommande pas d'imbriquer le chargement de plusieurs fichiers comme dans la réponse de Lars Kotthoff. Ce n'est pas la meilleure pratique.

EDIT: Je veux préciser la raison pour laquelle l'imbrication n'est pas la meilleure pratique. Cela réduit la lisibilité et la capacité de compréhension de votre code, et il existe également des moyens plus sémantiques de gérer plusieurs blocs de code asynchrones (c'est-à-dire des rappels et des promesses).

Il est préférable d’utiliser un rappel et de lui transmettre les résultats une fois toutes les tâches de chargement de fichier terminées. Les rappels éliminent le besoin d'imbriquer plusieurs demandes de ressources les unes dans les autres dans une pyramide d'imbrication.

Au fait, pas une question idiote!

0
travelsize

Pour répondre à votre partie 3, 

  1. Existe-t-il un moyen de choisir une certaine colonne parmi les fichiers csv à importer ?

Non, vous ne pouvez pas charger une partie d'une CSV. Cependant, vous pouvez charger le fichier CSV au complet et utiliser sélectivement une colonne de celui-ci. Vous pouvez vous référer à data.newVer pour utiliser les données de colonne newVer.

0
travelsize