В графовых компонентах Nivo используется модель силовой симуляции,
основанная на подходе, разработанном в D3.js. Эта модель применяется для
автоматического размещения узлов графа таким образом, чтобы структура
оставалась читаемой, а пересечения рёбер минимизировались.
Физическая симуляция рассматривает граф как систему частиц, где
каждый узел — это объект с массой, а связи между узлами — это пружины.
Поведение системы определяется набором сил, каждая из которых влияет на
движение узлов в пространстве координат.
Базовая структура
force-системы
В основе лежит итеративный алгоритм, который на каждом шаге
пересчитывает положение узлов:
- узлы получают ускорение от действующих сил
- скорость обновляется с учётом затухания
- координаты изменяются на основе текущей скорости
- система постепенно стремится к равновесию
Основные параметры состояния системы:
- координаты узлов (x, y)
- скорость (vx, vy)
- сила воздействия (fx, fy)
- коэффициент затухания (alpha)
Сила отталкивания (charge
force)
Сила отталкивания предотвращает наложение узлов друг на друга и
формирует общую структуру графа.
Математически она задаётся как:
- обратно пропорциональная расстоянию между узлами
- может быть глобальной или индивидуальной для каждого узла
Основные параметры:
- strength — интенсивность отталкивания
- distanceMax — максимальная дистанция действия
- theta (Barnes-Hut) — точность аппроксимации для
ускорения вычислений
Поведение:
- отрицательная сила раздвигает узлы
- высокая strength приводит к более «разреженному» графу
- низкая strength — к компактной структуре
Сила притяжения (link force)
Связывает узлы, которые соединены ребром, имитируя пружину.
Каждое ребро имеет:
- целевую длину
- жёсткость (stiffness)
- коэффициент демпфирования
Ключевые параметры:
- distance — целевая длина связи
- strength — жёсткость пружины
- iterations — количество итераций стабилизации
Поведение:
- при большой distance граф становится более разреженным
- при высокой strength связи становятся жёсткими
- при низкой strength структура становится «плавающей»
Центрирующая сила (center
force)
Возвращает систему в заданную область координат.
Используется для:
- удержания графа в пределах viewport
- предотвращения ухода узлов за границы сцены
Параметры:
- координаты центра (cx, cy)
- сила притяжения к центру
Эта сила не зависит от связей между узлами и действует глобально.
Сила столкновений (collision
force)
Отвечает за предотвращение пересечения узлов.
Каждый узел рассматривается как окружность с радиусом.
Параметры:
- radius — радиус узла
- strength — сила реакции столкновения
- iterations — точность расчёта
Поведение:
- при высокой strength узлы не пересекаются, но могут «отталкиваться
резко»
- при низкой strength возможны наложения
Коэффициент затухания (alpha
decay)
Симуляция не бесконечна — она постепенно стабилизируется за счёт
затухания энергии системы.
Основные параметры:
- alpha — текущая энергия системы
- alphaMin — порог остановки
- alphaDecay — скорость затухания
Поведение:
- высокая alphaDecay ускоряет стабилизацию, но снижает точность
- низкая alphaDecay делает граф более стабильным, но требует больше
итераций
Скорость и инерция узлов
Каждый узел обладает собственной динамикой движения:
- vx, vy — компоненты скорости
- inertia — сохраняемая часть движения
Обновление состояния:
- скорость изменяется под действием суммарных сил
- применяется затухание
- координаты обновляются
Это позволяет графу выглядеть «физически правдоподобным», а не
дискретным.
Инициализация симуляции
В контексте Nivo симуляция запускается при монтировании графа и
принимает входные данные:
- список узлов
- список связей
- конфигурацию сил
Пример структуры данных:
const nodes = [
{ id: 'A', value: 10 },
{ id: 'B', value: 20 }
];
const links = [
{ source: 'A', target: 'B' }
];
Далее конфигурация force-модели:
const config = {
linkDistance: 120,
linkStrength: 0.7,
repulsionStrength: -300,
collisionRadius: 10,
centerStrength: 0.1
};
Взаимодействие сил в системе
Все силы действуют одновременно, формируя результирующий вектор
ускорения:
- отталкивание создаёт разрежение структуры
- связи удерживают локальные кластеры
- центрирование стабилизирует глобальную позицию
- столкновения корректируют геометрию
Итоговое поведение определяется балансом параметров, а не одной
силой.
Численная интеграция
Алгоритм обновления состояния основан на дискретной симуляции:
- вычисление всех сил
- суммирование ускорений
- обновление скорости
- применение затухания
- обновление координат
Метод относится к классу явной интеграции Эйлера, что делает его
быстрым, но чувствительным к параметрам шага.
Оптимизация вычислений
Для больших графов используется несколько оптимизаций:
- пространственное разбиение (quadtree в стиле D3.js)
- ограничение радиуса взаимодействия
- аппроксимация дальних сил
Это позволяет поддерживать интерактивную производительность даже при
сотнях и тысячах узлов.
Настройка поведения через
параметры
Комбинации параметров определяют характер визуализации:
- высокая отталкивающая сила + слабые связи → кластерная
структура
- сильные связи + слабое отталкивание → плотные цепочки
- сильное центрирование → компактный радиальный граф
- высокая collision strength → строгая геометрическая упаковка
Поведение при стабилизации
По мере уменьшения alpha:
- скорость движения узлов падает
- система стремится к локальному минимуму энергии
- структура перестаёт изменяться визуально
При достижении alphaMin симуляция останавливается, фиксируя итоговое
расположение узлов.