Форматы данных: узлы и связи

Форматы представления графовых данных в Nivo строятся вокруг универсальной модели «узлы и связи», которая используется в большинстве визуализаций сетей, потоков и иерархий. Эта модель обеспечивает совместимость с различными типами графов — от простых неориентированных сетей до сложных направленных потоков и деревьев.

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

Типовая структура узла:

{
  "id": "nodeA",
  "label": "A",
  "value": 42
}

Ключевые свойства узла

id Уникальный идентификатор, используемый для связывания с другими узлами. Является обязательным полем.

label Отображаемое имя узла. Используется в подписях графа и tooltip-интерфейсах.

value Числовой параметр, определяющий «вес» узла. Применяется в визуализациях, где размер узла зависит от значимости.

Дополнительно могут использоваться произвольные поля:

  • group — принадлежность к категории
  • color — фиксированная визуальная стилизация
  • metadata — вложенные данные для tooltip или кастомных слоёв

Связи описывают отношения между узлами и формируют структуру графа. В Nivo связи всегда представлены отдельным массивом объектов.

Базовая структура связи:

{
  "source": "nodeA",
  "target": "nodeB",
  "value": 10
}

Основные поля связи

source Идентификатор начального узла. Используется для построения направления связи.

target Идентификатор конечного узла.

value Числовой вес связи, влияющий на толщину линии, интенсивность потока или силу взаимодействия.

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

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

Пример согласованной структуры:

{
  "nodes": [
    { "id": "A" },
    { "id": "B" },
    { "id": "C" }
  ],
  "links": [
    { "source": "A", "target": "B", "value": 5 },
    { "source": "B", "target": "C", "value": 3 }
  ]
}

Такой формат используется в force-directed графах, сетевых диаграммах и потоковых визуализациях.

Нормализация данных

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

  1. Проверка уникальности идентификаторов узлов
  2. Разрешение ссылок source/target
  3. Преобразование ссылок в внутренние индексы
  4. Вычисление производных параметров (степень узла, количество связей)

Если узел отсутствует в массиве nodes, но встречается в links, поведение зависит от конкретного компонента: некоторые графы автоматически создают «виртуальные» узлы, другие игнорируют такие связи.

Взвешенные графы

Поле value в связях используется для построения взвешенных структур. В различных типах диаграмм оно интерпретируется по-разному:

  • в force graph — влияет на силу притяжения
  • в sankey diagram — определяет ширину потока
  • в chord diagram — задаёт интенсивность дуги

Пример взвешенного графа:

{
  "nodes": [
    { "id": "X" },
    { "id": "Y" }
  ],
  "links": [
    { "source": "X", "target": "Y", "value": 100 }
  ]
}

Направленные и ненаправленные связи

Формат links универсален, но семантика направления зависит от визуализации.

Направленные графы

Используются в:

  • Sankey diagram
  • Network flow graphs
  • Dependency graphs

В таких структурах source → target имеет строгую интерпретацию потока.

Ненаправленные графы

Используются в force-directed сетях, где связь является симметричной. Несмотря на это, поля source и target сохраняются, но интерпретируются как равнозначные вершины ребра.

Иерархические структуры

Хотя модель nodes/links является базовой, некоторые компоненты Nivo поддерживают альтернативное деревообразное представление:

{
  "id": "root",
  "children": [
    {
      "id": "child1",
      "children": [
        { "id": "leaf1" }
      ]
    }
  ]
}

Такой формат отличается отсутствием явного массива links. Связи здесь выражены через вложенность.

При необходимости дерево может быть преобразовано в node-link формат и обратно.

Графы потоков (Sankey)

В Sankey-диаграммах структура nodes/links приобретает специфическую интерпретацию:

  • nodes — этапы процесса
  • links — потоки между этапами
  • value — объём потока

Особенность заключается в обязательной балансировке входящих и исходящих потоков для корректного отображения.

Chord-диаграммы

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

Пример логической модели:

{
  "matrix": [
    [0, 5, 3],
    [5, 0, 2],
    [3, 2, 0]
  ]
}

Матрица может быть преобразована в links для унификации обработки внутри визуализации.

Типизация и расширяемость

Формат nodes/links в Nivo намеренно не жёстко типизирован. Это позволяет:

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

Расширенные поля часто используются для:

  • кастомных цветов и стилей
  • категориальной группировки
  • динамических подписей
  • интерактивных событий

Преобразование данных из внешних источников

Часто исходные данные поступают в несовместимом формате:

  • adjacency list
  • adjacency matrix
  • JSON API структурированного вида

Преобразование в nodes/links включает:

  1. Извлечение уникальных сущностей в nodes
  2. Построение связей на основе ссылок
  3. Нормализацию идентификаторов
  4. Агрегацию повторяющихся ребер

Пример adjacency list:

{
  "A": ["B", "C"],
  "B": ["C"]
}

Преобразуется в:

{
  "nodes": [
    { "id": "A" },
    { "id": "B" },
    { "id": "C" }
  ],
  "links": [
    { "source": "A", "target": "B" },
    { "source": "A", "target": "C" },
    { "source": "B", "target": "C" }
  ]
}

Консистентность и ограничения модели

Корректность структуры nodes/links зависит от соблюдения нескольких правил:

  • каждый link должен ссылаться на существующие узлы
  • идентификаторы должны быть стабильными
  • значения value должны быть числовыми при использовании взвешенных графов
  • циклические зависимости допустимы только в неиерархических моделях

Нарушение этих правил приводит к некорректной визуализации или потере части связей при рендеринге.

Подготовка данных для рендера

Перед передачей в компонент Nivo данные проходят этап подготовки:

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

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

Оглавление