Использование D3-fetch для запроса и парсинга CSV и JSON данных

 Как использовать D3 fetch для запроса и парсинга CSV и JSON данных.

**С версии D3 5.0 d3-request (который предоставляет удобную альтернативу XMLHttpRequest) этот модуль был отключен; пожалуйста, используйте d3-fetch. ** Обычно, запрашиваемые данные (или ресурсы) будут иметь URL (унифицированный ресурс локатор), например https://wlove/my-csv.csv. fetch предоставляет удобный парсинг. Например, чтобы загрузить текстовый файл:

const text = await d3.text("/path/to/file.txt");
console.log(text); // Привет, мир!

Загрузка и парсинг CSV файла:

const data = await d3.csv("/path/to/file.csv");
console.log(data); // [{"Привет": "мир"}, ...]

D3 fetch делает запрос данных относительно простым. В этом разделе мы будем рассматривать наиболее распространенные форматы данных, используемые при построении визуализаций, такие как CSV и JSON.

Запрос CSV данных

CSV файлы - это текстовые файлы, содержащие табличные данные. Например:

rank,workers,company,state,city,growth,revenue,industry
1,227,Fuhu,California,El Segundo,158956.9106,195640000,Consumer Products & Services
2,191,Quest Nutrition,California,El Segundo,57347.9246,82640563,Food & Beverage
3,145,Reliant Asset Management,Virginia,Arlington,55460.1646,85076502,Business Products & Services
4,62,Superfish,California,Palo Alto,26042.963,35293000,Software
5,92,Acacia Communications,Massachusetts,Maynard,20690.4578,77652360,Telecommunications
...

Обычно (но не всегда) первая строка содержит названия полей (rank, workers и т. д., company). Остальные строки содержат данные. Каждое значение разделено запятой. Вы можете использовать d3.csv для запроса CSV файла:

d3.csv('/A/A.csv')
  .then(function(data) {
    console.log(data);
  });

d3.csv принимает URL в качестве своего первого параметра и возвращает объект Promise. Объект Promise представляет собой асинхронную операцию.Асинхронные операции — это операции, результат которых известен в будущем. Это означает, что ваш код может продолжать выполнение сразу после отправки запроса. Когда браузер получает данные от запроса, Promise выполняется, и функция, переданная в метод .then, вызывается.

Вам не обязательно полностью понимать Promise, чтобы использовать d3.csv. Основное, что нужно запомнить, — это передача функции обратного вызова методу .then. Когда файл приходит, вызывается обратный метод. Его первый параметр содержит данные. После завершения запроса D3 преобразует входящий CSV-файл в массив объектов. Каждый объект представляет собой строку данных:

"[{'name':'张三','age':'18','gender':'1'},{'name':'李四','age':'19','gender':'1'},{'name':'王五','age':'20','gender':'1'}]"

d3.csv предполагает, что первая строка содержит названия полей.

Обратите внимание, что все числа представлены в виде строк. В последующих примерах эти строки будут преобразованы обратно в числа. Массив выше можно использовать для добавления HTML или SVG элементов. Например:

function update(data) {
  d3.select('#content tbody')
    .selectAll('tr')
    .data(data)
    .join('tr')
    .html(function(d) {
      let html = '<tr>';
      html += '<td>' + d.name + '</td>';
      html += '<td>' + d.age + '</td>';
      html += '<td>' + d.gender + '</td>';
      // html += '<td>' + d.workers + '</td>';
      html += '</tr>';
      return html;
    });
}
d3.csv('https://wantnocode.github.io/test1.csv')
  .then(function(data) {
    update(data);
  });

https://codepen.io/wantnocode/pen/BarvYya

Преобразование строкВ предыдущем примере D3 интерпретирует числа в CSV-файле как строки. Это можно исправить, передавая опциональную функцию преобразования строк, которая будет отображать объект строки в более подходящий формат.

Проще говоря, это можно сделать, передавая функцию d3.csv как второй параметр. Эта функция будет вызываться для каждой строки данных, и возвращать новый объект с любыми необходимыми преобразованиями. В этом примере мы преобразуем строки в числа (где это возможно) и переименуем некоторые переменные:

function convertRow(d) {
  return {
    name: d.name,
    age: +d.age,
    gender: +d.gender
  }
}

Оператор + преобразует строку в число. Теперь массив данных выглядит следующим образом:

"[{'name':'张三','age':18,'gender':1},{'name':'李四','age':19,'gender':1},{'name':'王五','age':20,'gender':1}]"

Запрос данных JSON

JSON — это формат файла, тесно связанный с JavaScript массивами и объектами. Он позволяет использовать вложенные структуры, что делает его более предпочтительным по сравнению с табличными форматами. Вот пример JSON-файла, расположенного по адресу https://wantnocode.github.io/test.json:

[
  {
    "name": "张三",
    "age": 18,
    "gender": 1
  },
  {
    "name": "李四",
    "age": 19,
    "gender": 1
  },
  {
    "name": "Ван Ву",
    "age": 20,
    "gender": 1
  }
]

Вы используете следующую команду для запроса JSON-файла d3.json:

d3.json('https://wantnocode.github.io/test.json')
  .then(function(data) {
    update(data);
  });
```  Когда JSON-файл приходит, D3 преобразует его в JavaScript-массив или объект, который можно добавить в HTML или SVG-элементы:

function update(data) { d3.select('#content tbody') .selectAll('tr') .data(data) .join('tr') .html(function(d) { let html = '

 ![](https://codepen.io/wantnocode/pen/WNzLMeQ)
 > В отличие от данных CSV, JSON-данные не обязательно являются массивом объектов, поэтому `d3.json` не поддерживает функции преобразования строк.