Cargar datos desde archivos CSV en D3 v5

En D3 v4, cargar datos desde archivos CSV fue sencillo usando XMLHttpRequest. Sin embargo, con la introducción de Promises en D3 v5, el proceso ha cambiado ligeramente.

Usando D3 v5

Para cargar datos desde un archivo CSV usando D3 v5, puede utilizar la API fetch(). Así es como puedes modificar tu código:

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

Comprender la diferencia

La diferencia clave entre D3 v4 y D3 v5 radica en cómo manejan las solicitudes asincrónicas. D3 v4 usa XmlHttpRequest, que no devuelve una Promesa. Como resultado, le pasa una función de devolución de llamada que se ejecuta una vez que se completa la solicitud.

Por el contrario, D3 v5 usa la API Promise, que le permite manejar los casos de éxito y fracaso por separado. La función 'then()' se utiliza para manejar el caso de éxito, mientras que 'catch()' es para manejar errores.

Ejemplo

El siguiente fragmento de código proporciona un ejemplo completo de cómo cargar datos desde un archivo CSV usando D3 v5:

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

Al aprovechar la API de Promise, D3 v5 proporciona una forma más estructurada y flexible de manejar la carga de datos asincrónica en comparación con D3 v4.