Загрузка данных из файлов CSV в D3 v5

В D3 v4 загрузка данных из файлов CSV была простой с помощью XMLHttpRequest. Однако с появлением Promises в D3 v5 процесс немного изменился.

Использование D3 v5

Чтобы загрузить данные из CSV-файла с помощью D3 v5, вам может использовать API fetch(). Вот как вы можете изменить свой код:

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

Понимание разницы

Ключевое различие между D3 v4 и D3 v5 заключается в том, как они обрабатывают асинхронные запросы. D3 v4 использует XmlHttpRequest, который не возвращает обещание. В результате вы передаете ему функцию обратного вызова, которая запускается после завершения запроса.

Напротив, D3 v5 использует Promise API, который позволяет обрабатывать случаи успеха и неудачи отдельно. Функция then() используется для обработки случая успеха, а функция catch() — для обработки ошибок.

Пример

В следующем фрагменте кода представлен полный пример загрузки данных из файла CSV с помощью D3 v5:

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

Благодаря использованию Promise API D3 v5 обеспечивает более структурированный и гибкий способ обработки асинхронной загрузки данных по сравнению с D3 v4.