d3.js
Использование D3 с JSON и CSV

Синтаксис

• d3.csv (url [[, row], callback])
• d3.tsv (url [[, row], callback])
• d3.html (url [, callback])
• d3.json (url [, callback])
• d3.text (url [, callback])
• d3.xml (url [, callback])

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

Существует несколько способов получения данных, которые вы свяжете с элементами DOM. Более простой способ состоит в том, чтобы ваши данные в вашем скрипте были массивом ...

var data = [ ... ];

Но D3.js позволяет нам загружать данные из внешнего файла. В этом примере мы увидим, как правильно загружать и обрабатывать данные из файла CSV.

CSV-файлы являются значениями, разделенными запятыми . В этом виде файлов каждая строка представляет собой запись данных, каждая запись состоит из одного или нескольких полей, разделенных запятыми. Важно знать, что функция, которую мы собираемся использовать, d3.csv , использует первую строку CSV в качестве заголовка , то есть строку, которая содержит имена полей.

Итак, рассмотрите этот CSV, названный «data.csv»:

city,population,area
New York,3400,210
Melbourne,1200,350
Tokyo,5200,125
Paris,800,70

Чтобы загрузить «data.csv», мы используем функцию d3.csv . Чтобы было проще, предположим, что «data.csv» находится в одном каталоге нашего скрипта, а его относительный путь - просто «data.csv». Итак, мы пишем:

d3.csv("data.csv", function(data){
    //code dealing with data here
});

Обратите внимание, что в обратном вызове мы использовали data в качестве аргумента. Это обычная практика в D3, но вы можете использовать любое другое имя.

Что d3.csv делает с нашим CSV? Он преобразует CSV в массив объектов. Если, например, мы console.log наши данные:

d3.csv("data.csv", function(data){
    console.log(data)
});

Это то, что мы увидим:

[
    {
        "city": "New York",
        "population": "3400",
        "area": "210"
    },{
        "city": "Melbourne",
        "population": "1200",
        "area": "350"
    },{
        "city": "Tokyo",
        "population": "5200",
        "area": "125"
    },{
        "city": "Paris",
        "population": "800",
        "area": "70"
    }
]

Теперь мы можем привязать эти данные к нашим элементам DOM.

Обратите внимание, что в этом примере population и area являются строками. Но, возможно, вы хотите иметь дело с ними как с цифрами. Вы можете изменить их в функции внутри обратного вызова (как forEach ), но в d3.csv вы можете использовать функцию «accessor»:

d3.csv("data.csv", conversor, function(data){
    //code here
});

function conversor(d){
    d.population = +d.population;
    d.area = +d.area;
    return d;
}

Вы также можете использовать аксессоры в d3.tsv , но не в d3.json .

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

Один или два параметра обработки обратного вызова в d3.request ()

При использовании d3.request() или одного из конструкторов удобства ( d3.json , d3.csv , d3.tsv , d3.html и d3.xml ) существует много источников ошибок. Возможно, возникли проблемы с выданным запросом или его ответом из-за сетевых ошибок, или синтаксический анализ может завершиться неудачно, если контент не был правильно сформирован.

Внутри обратных вызовов, переданных любому из вышеупомянутых методов, поэтому желательно реализовать некоторую обработку ошибок. Для этой цели обратные вызовы могут принимать два аргумента, первая из которых является ошибкой, если таковая имеется, вторая является данными. Если какая-либо ошибка при загрузке или анализе информации об ошибке будет передана как первая error аргумента с null data .

d3.json{"some_file.json", function(error, data) {
  if (error) throw error;   // Exceptions handling
  // Further processing if successful
});

Вы, вообще говоря, не обязаны предоставлять два параметра. Совершенно нормально использовать методы запросов с обратным вызовом, имеющим только один параметр. Для обработки этих видов обратных вызовов есть private function fixCallback() в request.js, который настраивает способ передачи информации одному аргументу метода.

function fixCallback(callback) {
  return function(error, xhr) {
    callback(error == null ? xhr : null);
  };
}

Это будет вызываться D3 для всех обратных вызовов, имеющих только один параметр, который по определению является данными.

Независимо от того, сколько параметров задано для обратного вызова метода запроса, правило для параметра data :

• если запрос не выполнен, data будут null
• если запрос будет успешным, data будут содержать загруженное (и разобранное) содержимое

Единственная разница между однопараметрической и двухпараметрической версиями заключается в том, как обеспечивается информация об ошибке, которая может возникнуть. Если параметр error опущен, метод будет терпеть неудачу, оставляя data null . Если, с другой стороны, обратный вызов имеет два аргумента, информация об ошибке при загрузке или синтаксическом анализе будет передана первому параметру, что позволит вам обрабатывать его соответствующим образом.

Следующие четыре вызова d3.json демонстрируют возможные сценарии для существующих / несуществующих файлов по сравнению с одним обратным вызовом параметров / двух параметров:

// FAIL: resource not available or content not parsable
// error contains information about the error
// data will be null because of the error
d3.json("non_existing_file.json", function(error, data) {
  console.log("Fail, 2 parameters: ", error, data);
});

// FAIL: resource not available or content not parsable
// no information about the error
// data will be null because of the error
d3.csv("non_existing_file.json", function(data) {
  console.log("Fail, 1 parameter: ", data);
});

// OK: resource loaded successfully
// error is null
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(error, data) {
  console.log("OK, 2 parameters: ", error, data);
});

// OK: resource loaded successfully
// no information about the error; this fails silently on error
// data contains the JSON loaded from the resource
d3.json("existing_file.json", function(data) {
  console.log("OK, 1 parameter: ", data);
});