javascript - Cómo cargar datos de un archivo CSV en D3 v5

d3.js

Question

Estoy tratando de cargar datos de un archivo CSV en D3; Tengo este codigo:

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 uso D3 v4 funciona bien, pero si cambio a v5 ya no funciona. ¿Alguien puede explicarme cómo modificar el código para que funcione con D3 v5?

Answer 1

d3 v5 utiliza la API de recuperación y devuelve una promesa que requiere el siguiente código.

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

En caso de que en el futuro la gente quiera v4. d3 v4, por otro lado, utiliza el método XMLHttpRequest y no devuelve una promesa que requiera este código

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

la carga de csv es asíncrona, así que asegúrese de ejecutar su código de gráfico dentro de la función csv.

Answer 2

share es buena, pero si desea usar ES7 async / await en lugar de Promise.then:

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

doThings();