Компонент Network: граф узлов и рёбер

Компонент Network в экосистеме Nivo предназначен для визуализации графов, состоящих из узлов (nodes) и связей между ними (links). Основная идея заключается в отображении структуры, где каждая сущность представлена вершиной, а взаимодействия — рёбрами между ними.

Базовая модель данных включает два ключевых массива:

const data = {
  nodes: [
    { id: 'A', size: 12 },
    { id: 'B', size: 8 },
    { id: 'C', size: 16 }
  ],
  links: [
    { source: 'A', target: 'B', distance: 50 },
    { source: 'B', target: 'C', distance: 70 },
    { source: 'A', target: 'C', distance: 120 }
  ]
}

Каждый узел идентифицируется уникальным id, а каждое ребро связывает два узла через поля source и target. Дополнительные параметры, такие как size, distance, strength, используются для управления визуальными и физическими свойствами графа.

Базовая конфигурация компонента Network

Компонент из пакета @nivo/network интегрируется как React-компонент и принимает данные вместе с набором параметров визуализации.

import { ResponsiveNetwork } from '@nivo/network'

const MyNetwork = ({ data }) => (
  <ResponsiveNetwork
    data={data}
    margin={{ top: 0, right: 0, bottom: 0, left: 0 }}
    linkDistance={100}
    centeringStrength={0.3}
    repulsivity={6}
    nodeSize={12}
  />
)

Основные параметры управления поведением графа:

  • linkDistance — базовая длина рёбер
  • repulsivity — сила отталкивания узлов
  • centeringStrength — сила притяжения к центру
  • nodeSize — размер узлов по умолчанию

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

Механика layout и физическая симуляция

Network использует force-directed подход, где каждый узел рассматривается как объект, на который действуют силы:

  • отталкивание между всеми узлами
  • притяжение вдоль рёбер
  • центрирующая сила
  • дополнительное сопротивление движению

Модель поведения можно интерпретировать через упрощённое уравнение баланса сил:

F_{net} = F_{repulsion} + F_{attraction} + F_{center}

Увеличение repulsivity расширяет граф, снижая плотность. Увеличение linkDistance приводит к более «разреженной» структуре связей. Баланс этих параметров критически влияет на читаемость визуализации.

Настройка узлов: размер, цвет и форма

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

nodeComponent={({ node }) => (
  <g transform={`translate(${node.x},${node.y})`}>
    <circle r={node.size} fill="#468df3" />
    <text
      textAnchor="middle"
      dy={-10}
      fontSize={10}
    >
      {node.id}
    </text>
  </g>
)}

Параметры узлов могут задаваться как статически, так и динамически:

nodes: [
  { id: 'A', size: 20, color: '#ff0000' },
  { id: 'B', size: 10, color: '#00ff00' }
]

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

Настройка рёбер: толщина, прозрачность и направление

Рёбра графа описываются через объект links. Визуальные свойства могут быть заданы через linkThickness, linkColor или кастомный компонент.

linkThickness={link => link.strength * 2}
linkColor={() => '#999999'}

Пример кастомного рёбра:

linkComponent={({ link }) => (
  <line
    x1={link.source.x}
    y1={link.source.y}
    x2={link.target.x}
    y2={link.target.y}
    stroke="#ccc"
    strokeWidth={link.distance / 50}
  />
)}

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

Взаимодействие: hover, click и drag

Network поддерживает интерактивность узлов и рёбер. Основные события:

  • onClick
  • onMouseEnter
  • onMouseLeave
  • onDragStart
  • onDrag

Пример обработки взаимодействий:

onCl ick={node => {
  console.log('Выбран узел:', node.id)
}}

onMouseEn ter={node => {
  node.color = '#ffcc00'
}}

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

Фильтрация и управление сложностью графа

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

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

Пример фильтрации:

const filteredLinks = links.filter(
  l => l.strength > 0.5
)

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

Работа с кластерами и группировкой

Кластеризация используется для выделения сообществ внутри графа. Узлы могут быть объединены по признаку:

  • категории
  • частоты взаимодействия
  • семантической близости

Пример добавления группировки:

nodes: [
  { id: 'A', group: 1 },
  { id: 'B', group: 1 },
  { id: 'C', group: 2 }
]

Далее визуальное оформление может зависеть от group:

fill={node => node.data.group === 1 ? '#ff7f0e' : '#1f77b4'}

Управление масштабируемостью и производительностью

При увеличении количества узлов и рёбер нагрузка на симуляцию возрастает. Основные методы оптимизации:

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

Симуляция может быть остановлена вручную после достижения стабильного состояния графа, что уменьшает потребление ресурсов.

Подписи и отображение информации

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

  • всегда
  • при наведении
  • при увеличении масштаба
label={node => node.id}
labelComponent={({ node }) => (
  <text fontSize={12} fill="#333">
    {node.id}
  </text>
)}

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

Работа с масштабированием и центровкой

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

Основные параметры:

  • начальный масштаб
  • ограничение zoom min/max
  • центрирование графа

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

Расширенные сценарии использования Network

Графовая визуализация применяется в различных задачах:

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

В каждом случае структура узлов и рёбер адаптируется под предметную область, а визуальные параметры становятся инструментом кодирования информации, а не просто оформлением.

Оглавление