So laden Sie Daten aus einer CSV-Datei in D3 v5

Ich versuche, das laden der Daten aus einer CSV-Datei in D3, ich habe diesen 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);
}

Wenn ich D3 v4 funktioniert es einwandfrei, aber wenn ich den Schalter auf v5 es nicht mehr funktioniert.
Kann mir jemand erklären wie man den code ändern, damit es funktioniert mit D3 v5?

  • hier Die Antwort können Sie in die richtige Richtung. Die API um es channged leicht und jetzt ist es gibt ein Versprechen.
  • Werfen Sie einen Blick auf die änderungen markdown.
  • Ich kann nicht schließen, dies als eine doppelte, weil diese Frage offenbar nicht ein Duplikat ist, dass man Sie verlinkt. Auf top von, dass, deine Antwort ist falsch (in Bezug auf OP ' s Frage), können Sie sogar sehen, ein downvote. Also, fühlen Sie sich frei zu kopieren, die Antwort hier (ohne den Stapel Schnipsel, stack-snippet für die running code only) und löschen Sie diese, da es falsch ist.
  • ja, repostedy Antwort auf die eigentliche Frage.
InformationsquelleAutor StormPooper | 2018-04-01
  1. 35

    d3 v5 verwendet fetch API und gibt ein Versprechen, dass der code unten.

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

    Falls in der Zukunft die Menschen wollen, v4. d3 v4 auf der anderen Seite verwendet das XMLHttpRequest-Methode, und nicht wieder ein Versprechen, dass dies der code

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

    csv-laden ist async, so stellen Sie sicher, dass Sie Ihre Diagramm-code im csv-Funktion.

    • Entfernt das hängt von der jeweiligen version. Gehalten die version 4 der code für Leute, die finden diese später.
    • wie kann ich prüfen, ob Fehler in D3 v5?
    • Wenn die Antwort ist nicht ok, also HTTP-status andere als 200-299, die zurückgegeben Versprechen werden abgelehnt. Sie können .catch(), um die Behandlung dieser Fehler. D3 wird nicht Bericht, sonstige Fehler, noch werden Sie Ihnen den Zugang zu den Response Objekt. Diese wurde ausgelöst, als ein Problem wurde aber abgelehnt von Mike Bostock, wer fördert die Nutzung von Fetch API sollte es keine Notwendigkeit für eine weitere Fehlerbehandlung.
    • Ich bin immer ein ReferenceError: fetch is not defined
    • welchen browser verwenden Sie? Diese Arbeit sollte für alle modernen Browser developer.mozilla.org/en-US/docs/Web/API/... möglicherweise müssen Sie ein polyfill zu unterstützen IE-Versionen.
    InformationsquelleAutor pmkro
  2. 3

    @pmkro Antwort ist gut, aber wenn Sie verwenden möchten ES7 async/erwarten statt Versprechen.dann:

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

doThings();
    • Kann ich die Synchronisierung mit? Es gibt ein vollständiges Beispiel? tun 1 tun 2? doThings1(); doThings2();.
    InformationsquelleAutor humfuzz
Schreibe einen Kommentar