Carregando dados de arquivos CSV no D3 v5

No D3 v4, carregar dados de arquivos CSV era simples usando XMLHttpRequest. No entanto, com a introdução de Promessas no D3 v5, o processo mudou um pouco.

Usando o D3 v5

Para carregar dados de um arquivo CSV usando o D3 v5, você pode utilizar a API fetch(). Veja como você pode modificar seu 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
    })

Compreendendo a diferença

A principal diferença entre D3 v4 e D3 v5 está em como eles lidam com solicitações assíncronas. D3 v4 usa XmlHttpRequest, que não retorna uma promessa. Como resultado, você passa uma função de retorno de chamada que é executada assim que a solicitação é concluída.

Em contraste, o D3 v5 usa a API Promise, que permite lidar com os casos de sucesso e falha separadamente. A função 'then()' é usada para lidar com o caso de sucesso, enquanto 'catch()' é para lidar com erros.

Exemplo

O trecho de código a seguir fornece um exemplo completo de como carregar dados de um arquivo 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   
  })

Ao aproveitar a API Promise, o D3 v5 fornece uma maneira mais estruturada e flexível de lidar com o carregamento assíncrono de dados em comparação com o D3 v4.