Chargement de données à partir de fichiers CSV dans D3 v5

Dans D3 v4, le chargement de données à partir de fichiers CSV était simple à l'aide de XMLHttpRequest. Cependant, avec l'introduction de Promises dans D3 v5, le processus a légèrement changé.

Utilisation de D3 v5

Pour charger des données à partir d'un fichier CSV à l'aide de D3 v5, vous peut utiliser l'API fetch(). Voici comment modifier votre code :

d3.csv('data/dataset.csv')
    .then(function(data) {
        if (error !== null) {
            alert ("Couldn't load the dataset!");
        } else {
            //do something
        };
    })
    .catch(function(error) {
        //handle error
    })

Comprendre la différence

La principale différence entre D3 v4 et D3 v5 réside dans la façon dont ils gèrent les requêtes asynchrones. D3 v4 utilise XmlHttpRequest, qui ne renvoie pas de promesse. En conséquence, vous lui transmettez une fonction de rappel qui s'exécute une fois la requête terminée.

En revanche, D3 v5 utilise l'API Promise, qui vous permet de gérer séparément les cas de réussite et d'échec. La fonction « then() » est utilisée pour gérer les cas de réussite, tandis que « catch() » sert à gérer les erreurs.

Exemple

L'extrait de code suivant fournit un exemple complet de comment charger des données à partir d'un fichier CSV à l'aide de D3 v5 :

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

En tirant parti de l'API Promise, D3 v5 offre un moyen plus structuré et plus flexible de gérer le chargement de données asynchrone par rapport à D3 v4.