Laden von Daten aus CSV-Dateien in D3 v5

In D3 v4 war das Laden von Daten aus CSV-Dateien mithilfe von XMLHttpRequest unkompliziert. Mit der Einführung von Promises in D3 v5 hat sich der Prozess jedoch geringfügig geändert.

Verwenden von D3 v5

Um Daten aus einer CSV-Datei mit D3 v5 zu laden, müssen Sie kann die fetch()-API verwenden. So können Sie Ihren Code ändern:

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
    })

Den Unterschied verstehen

Der Hauptunterschied zwischen D3 v4 und D3 v5 liegt in der Art und Weise, wie sie asynchrone Anfragen verarbeiten. D3 v4 verwendet XmlHttpRequest, das kein Promise zurückgibt. Als Ergebnis übergeben Sie ihm eine Rückruffunktion, die ausgeführt wird, sobald die Anforderung abgeschlossen ist.

Im Gegensatz dazu verwendet D3 v5 die Promise-API, die es Ihnen ermöglicht, Erfolgs- und Fehlerfälle getrennt zu behandeln. Die Funktion „then()“ wird zur Behandlung des Erfolgsfalls verwendet, während „catch()“ zur Behandlung von Fehlern dient.

Beispiel

Das folgende Code-Snippet bietet ein vollständiges Beispiel für das Laden von Daten aus einer CSV-Datei mit D3 v5:

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

Durch die Nutzung der Promise-API bietet D3 v5 im Vergleich zu D3 v4 eine strukturiertere und flexiblere Möglichkeit, das asynchrone Laden von Daten zu handhaben.