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();