В визуализациях графов в Nivo структура данных строится вокруг двух фундаментальных сущностей — узлов (nodes) и рёбер (links или edges). Узлы представляют собой вершины графа, содержащие идентификатор, метаданные и визуальные параметры. Рёбра описывают связи между узлами и могут хранить дополнительную информацию: вес, тип связи, направление, а также стилизацию.
Типичная структура данных для сетевых визуализаций Nivo выглядит следующим образом:
Каждый узел обычно содержит:
id — уникальный идентификаторgroup, value,
color, depth, data)Каждое ребро содержит:
source — идентификатор исходного узлаtarget — идентификатор целевого узлаweight, distance,
color, thickness)Эта модель используется в компонентах наподобие
@nivo/network, @nivo/sankey,
@nivo/force, где визуализация графа строится динамически на
основе вычислений layout-алгоритма.
В Nivo узлы рендерятся как изолированные компоненты, что позволяет
полностью переопределять их внешний вид через
nodeComponent.
Механизм кастомизации узла строится на функции:
Стандартный узел может быть заменён на произвольную форму:
Ключевые параметры, доступные в кастомизации:
node.x, node.y — позицияnode.size — базовый размерnode.color — вычисленный цветnode.data — пользовательские данныеnode.selected, node.isActive — состояния
взаимодействияПример логики кастомного узла:
SVG является основным режимом отрисовки в Nivo для графов. Он обеспечивает точное позиционирование и удобную работу с трансформациями.
Кастомный SVG-узел обычно строится вокруг группы
<g>:
translate(x, y)circle, rect,
path)text, tspan)Основные принципы:
transformРаспространённые техники:
<defs>В режимах с высокой плотностью данных используется Canvas-рендеринг. В этом случае кастомизация узлов происходит через imperative API, а не JSX.
Особенности:
Кастомизация включает:
arc, rect,
lineTo)ctx.fillStyle,
ctx.strokeStylefillTextЛогика узла в Canvas:
Canvas требует строгого контроля производительности, так как каждая перерисовка выполняется вручную.
Рёбра в Nivo определяют визуальные связи между узлами и могут быть
полностью переопределены через linkComponent.
Базовые параметры ребра:
sourceX,
sourceY, targetX, targetY)width)color)opacity)Основные подходы к кастомизации:
Часто применяется динамическая стилизация:
Рёбра могут быть реализованы не только как прямые линии, но и как кривые. Это особенно важно в плотных графах, где пересечения линий снижают читаемость.
Используемые подходы:
Кривые позволяют:
При использовании кривых ключевым становится контроль контрольных точек, которые формируют изгиб линии между узлами.
Направленные графы требуют визуального обозначения направления ребра. В Nivo это реализуется через:
marker-end)Основные техники:
Стрелки часто масштабируются в зависимости от:
Система темы Nivo позволяет централизованно управлять внешним видом узлов и рёбер.
Параметры темы:
nodes: базовые цвета, обводки, шрифтыlinks: цвет линий, прозрачность, активные
состоянияlabels: типографика подписейКастомизация через тему обеспечивает:
Тема часто комбинируется с локальной кастомизацией компонентов для тонкой настройки отдельных элементов.
Узлы и рёбра поддерживают интерактивные состояния:
Каждое состояние может влиять на:
Типичная логика взаимодействия:
Nivo использует анимационную систему для плавного перехода между состояниями графа.
Анимации применяются к:
Ключевые особенности:
При больших графах анимации могут отключаться для повышения производительности.
Кастомизация узлов и рёбер напрямую влияет на производительность графа.
Основные факторы:
Оптимизационные подходы:
Для графов с тысячами элементов критично избегать тяжёлых JSX-структур внутри nodeComponent.
Наиболее гибкие визуализации строятся на совместной настройке узлов и рёбер.
Распространённые комбинации:
Такая комбинация позволяет формировать сложные структуры данных: