web-dev-qa-db-fra.com

Comment charger des données à partir d'un fichier CSV dans D3 v5

J'essaie de charger des données d'un fichier CSV dans D3; J'ai ce code:

function update (error, data) {
    if (error !== null) {
        alert ("Couldn't load the dataset!");
    } else {
        //do something
    };

function changeData () {
    d3.csv ("data/dataset.csv", update);
}

Si j'utilise D3 v4, cela fonctionne bien, mais si je passe en v5, cela ne fonctionne plus .. Quelqu'un peut-il m'expliquer comment modifier le code pour qu'il fonctionne avec D3 v5?

javascriptd3.js
9
Bananasaurus

d3 v5 utilise l'API d'extraction et renvoie une promesse nécessitant le code ci-dessous.

d3.csv('yourcsv.csv')
  .then(function(data) {
      // data is now whole data set
      // draw chart in here!
  })
  .catch(function(error){
     // handle error   
  })

Au cas où à l'avenir les gens veulent la v4. d3 v4 utilise en revanche la méthode XMLHttpRequest et ne renvoie aucune promesse nécessitant ce code

d3.csv('yourcsv.csv', function(data) {
    //whole data set
    // draw chart here
})

le chargement du fichier csv est asynchrone, assurez-vous donc que votre code de graphique est exécuté dans la fonction csv. 

21
pmkro

La réponse de @ pmkro est bonne, mais si vous voulez utiliser ES7 async / wait au lieu de Promise.then

async function doThings() {
  const data = await d3.csv('yourcsv.csv');
  // do whatever with data here
}

doThings();
1
humfuzz