webentwicklung-frage-antwort-db.com.de

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

Ich versuche, Daten aus einer CSV-Datei in D3 zu laden. 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 verwende, funktioniert es gut, aber wenn ich zu v5 wechsle, funktioniert es nicht mehr ... Kann mir jemand erklären, wie ich den Code ändern kann, damit er mit D3 v5 funktioniert?

9
Bananasaurus

d3 v5 verwendet die Abruf-API und gibt ein Versprechen zurück, das den folgenden Code erfordert.

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

Für den Fall, dass die Leute in der Zukunft v4 wollen. d3 v4 verwendet dagegen die XMLHttpRequest-Methode und gibt kein Versprechen zurück, das diesen Code erfordert

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

das csv-Laden ist asynchron. Stellen Sie daher sicher, dass Sie Ihren Diagrammcode innerhalb der csv-Funktion ausführen. 

21
pmkro

@ pmkro's answer ist gut, aber wenn Sie ES7 async / await anstelle von Promise verwenden wollen, dann:

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

doThings();
1
humfuzz