Загрузка нескольких источников: Promise.all

При работе с D3.js часто требуется одновременно получать несколько наборов данных из различных источников: JSON-файлы с конфигурацией, CSV-таблицы с измерениями, внешние API с динамическими значениями. Последовательная загрузка в таких сценариях приводит к увеличению времени ожидания и усложнению логики. Параллельное выполнение запросов через Promise.all позволяет организовать эффективную и предсказуемую модель инициализации визуализации.

Библиотека D3.js предоставляет набор функций для асинхронной загрузки данных: d3.json, d3.csv, d3.tsv, d3.text. Каждая из них возвращает Promise, что делает возможным их объединение в единый поток выполнения.

Ключевая особенность подхода заключается в том, что все запросы инициируются одновременно, а дальнейшая обработка выполняется только после завершения всех операций.

const dataPromises = [
  d3.json("data/config.json"),
  d3.csv("data/values.csv"),
  d3.json("data/meta.json")
];

Promise.all(dataPromises)
  .then(([config, values, meta]) => {
    // обработка всех источников одновременно
  });

Каждый элемент массива Promise соответствует отдельному источнику данных. Порядок результатов в Promise.all сохраняется строго в соответствии с порядком входного массива, независимо от фактического времени завершения загрузки.

Структура данных и согласование источников

При работе с несколькими источниками данных возникает задача их согласования. Разные форматы могут содержать перекрывающиеся ключи, различную структуру или несогласованные типы данных.

Типичный сценарий включает:

  • конфигурационный JSON с параметрами визуализации;
  • табличные данные CSV с числовыми значениями;
  • метаданные JSON с описательными атрибутами.

После завершения Promise.all выполняется этап нормализации данных:

Promise.all([
  d3.json("config.json"),
  d3.csv("data.csv"),
  d3.json("meta.json")
]).then(([config, rawData, meta]) => {

  const data = rawData.map(d => ({
    id: d.id,
    value: +d.value,
    group: d.group
  }));

  const enriched = data.map(d => ({
    ...d,
    label: meta.labels[d.id]
  }));

});

Преобразование типов выполняется сразу после загрузки, поскольку CSV-формат возвращает строки. Приведение к числам является обязательным шагом перед любыми вычислениями или масштабированием.

Promise.all и обработка ошибок

Promise.all прерывает выполнение при первой ошибке любого из промисов. Это поведение важно учитывать при работе с внешними источниками данных, где вероятность сбоя не равна нулю.

Promise.all([
  d3.json("config.json"),
  d3.csv("data.csv"),
  d3.json("meta.json")
])
.then(([config, data, meta]) => {
  // основной поток
})
.catch(error => {
  console.error("Ошибка загрузки данных:", error);
});

Если хотя бы один запрос завершается с ошибкой, весь набор считается неуспешным. Это делает Promise.all строгим механизмом синхронизации, подходящим для случаев, где частичные данные неприемлемы.

Альтернативная стратегия: частичная устойчивость

В некоторых сценариях требуется продолжить выполнение даже при сбое одного из источников. В таких случаях применяется оборачивание промисов с обработкой ошибок на уровне каждого запроса.

const safeLoad = (loader, url) =>
  loader(url)
    .then(data => ({ status: "fulfilled", data }))
    .catch(error => ({ status: "rejected", error }));

Promise.all([
  safeLoad(d3.json, "config.json"),
  safeLoad(d3.csv, "data.csv"),
  safeLoad(d3.json, "meta.json")
]).then(results => {

  const [configRes, dataRes, metaRes] = results;

  if (dataRes.status === "fulfilled") {
    const data = dataRes.data;
  }

});

Такой подход позволяет сохранить контроль над частично доступными данными, снижая критичность отдельных отказов.

Использование Promise.all в инициализации визуализации

Инициализация визуализации в D3.js часто включает несколько этапов: загрузку данных, создание шкал, построение осей, отрисовку элементов. Promise.all выступает точкой синхронизации перед запуском рендеринга.

Promise.all([
  d3.json("layout.json"),
  d3.csv("metrics.csv")
]).then(([layout, metrics]) => {

  const width = layout.width;
  const height = layout.height;

  const xScale = d3.scaleLinear()
    .domain(d3.extent(metrics, d => +d.x))
    .range([0, width]);

  const yScale = d3.scaleLinear()
    .domain(d3.extent(metrics, d => +d.y))
    .range([height, 0]);

  d3.select("svg")
    .attr("width", width)
    .attr("height", height)
    .selectAll("circle")
    .data(metrics)
    .enter()
    .append("circle")
    .attr("cx", d => xScale(+d.x))
    .attr("cy", d => yScale(+d.y))
    .attr("r", 3);
});

Синхронная доступность всех данных до начала рендеринга исключает частичные состояния визуализации и упрощает управление DOM.

Взаимодействие с кешированием и повторными запросами

При повторной загрузке одних и тех же источников браузер может использовать кеш, однако логика Promise.all остаётся неизменной: ожидание всех промисов продолжается до завершения последнего.

В сложных визуализациях часто применяется предварительное разделение данных на критические и второстепенные. Это позволяет оптимизировать пользовательское восприятие, загружая сначала минимально необходимый набор.

Promise.all и асинхронные вычисления поверх данных

После загрузки нескольких источников часто выполняются дополнительные вычисления: агрегация, фильтрация, построение иерархий.

Promise.all([
  d3.json("nodes.json"),
  d3.json("links.json")
]).then(([nodes, links]) => {

  const nodeMap = new Map(nodes.map(n => [n.id, n]));

  const enrichedLinks = links.map(l => ({
    source: nodeMap.get(l.source),
    target: nodeMap.get(l.target),
    weight: l.weight
  }));

});

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

Композиция промисов и масштабирование архитектуры

При увеличении количества источников данных массив промисов становится центральным элементом архитектуры загрузки. Его формирование может быть динамическим:

const sources = ["a.json", "b.json", "c.json"];

const loaders = sources.map(url => d3.json(url));

Promise.all(loaders).then(results => {
  // обработка массива результатов
});

Такой подход обеспечивает масштабируемость при росте числа входных данных без изменения основной логики обработки.

Согласование типов данных после загрузки

Разнородные источники требуют унификации типов перед визуализацией. D3.js не выполняет автоматическое приведение типов для всех форматов, особенно CSV.

Promise.all([
  d3.csv("a.csv"),
  d3.csv("b.csv")
]).then(([a, b]) => {

  const normalize = d => ({
    time: new Date(d.time),
    value: +d.value
  });

  const dataA = a.map(normalize);
  const dataB = b.map(normalize);

});

Приведение типов на этапе постобработки снижает вероятность ошибок в шкалах и геометрических вычислениях.

Сочетание Promise.all с другими примитивами асинхронности

Несмотря на центральную роль Promise.all, он часто комбинируется с последовательными цепочками промисов для частичной зависимости данных.

Promise.all([
  d3.json("config.json"),
  d3.csv("data.csv")
])
.then(([config, data]) => {
  return d3.json(`api/${config.endpoint}.json`)
    .then(extra => ({ config, data, extra }));
})
.then(({ config, data, extra }) => {
  // финальная обработка
});

Такая композиция позволяет сначала синхронизировать независимые источники, а затем продолжить цепочку с зависимыми запросами.

Поведение при различной задержке источников

Асинхронная природа загрузки приводит к тому, что быстрые источники не блокируют медленные. Однако финальный результат формируется только после завершения всех промисов.

Это свойство делает Promise.all предсказуемым инструментом синхронизации, особенно в контексте визуализаций, где частичное отображение данных может нарушить целостность структуры отображения.

Оглавление