Разработка визуализации графов связей (Network Graph) на сайте

Отметим: когда в микросервисной архитектуре число зависимостей переваливает за сотню, стандартные списки перестают работать. Визуализация графов связей (Network Graph) — единственный способ увидеть, какие сервисы зависят от устаревшей базы или где образуются циклы. На практике граф микросервисов часто содержит 10 000+ узлов — без force-directed layout и WebGL рендер «вешал» браузер. Проблема усугубляется, когда данные динамически обновляются: каждый запрос к API перестраивает граф, а без оптимизации интерактивность становится невозможной. На одном из проектов клиента мы сократили время загрузки графа с 12 до 2 секунд за счет виртуализации узлов и LOD-рендеринга, что сэкономило заказчику 200 000 руб. в месяц на поиске ошибок. Без таких подходов граф остаётся нечитаемым и бесполезным для анализа.

Правильный выбор алгоритма layout — критическое решение, определяющее UX. Force-directed layout даёт естественную кластеризацию, позволяя быстро выявлять изолированные узлы и плотные группы. В результате команда может оперативно находить закольцованные зависимости и предотвращать каскадные сбои.

Почему force-directed layout — основа Network Graph?

Force-directed layout физически симулирует узлы: они отталкиваются друг от друга, а связи притягивают. Результат — естественное расположение, где связанные узлы рядом, а несвязанные — далеко. Это ключ к читаемости. Без такого алгоритма граф превращается в хаотичное «спагетти».

Какую библиотеку выбрать для визуализации графа?

D3 Force vs Sigma.js: сравнительный анализ

Sigma.js обрабатывает 50k узлов в 5 раз быстрее, чем D3 Force, благодаря WebGL. Для проектов с >10k узлов Sigma.js — оптимальный выбор, хотя D3 Force даёт больше гибкости в кастомизации. Sigma.js official documentation подтверждает, что библиотека рендерит до 100k узлов на обычном ноутбуке.

Сравнение 2D и 3D-рендеринга

Выбор между 2D и 3D зависит от задач. Для визуализации зависимостей сервисов обычно хватает 2D. 3D нужен для геоданных или молекулярных структур. Метод визуализации определяется типом данных и требованиями к интерактивности.

Как мы это делаем: стек и кейс

Для визуализации зависимостей микросервисов мы используем JS граф на базе react-force-graph. Мы предпочитаем react-force-graph — он даёт готовый React-компонент с WebGL-ускорением. Для большого проекта из нашей практики (5000+ узлов) мы использовали Sigma.js: сырые данные загружали через graphology, настраивали layout через force-atlas2.

В практике мы часто используем гибридный подход: на этапе разведки строим прототип на D3 Force, а затем переносим на Sigma.js или react-force-graph для продакшена. Это позволяет быстро валидировать гипотезы без глубокой оптимизации. Для клиента из финтеха мы разработали граф мониторинга транзакций, где каждый узел — счёт, а связи — переводы. Граф обновлялся в реальном времени и выдерживал до 1000 изменений в секунду. Если хотите оценить, подходит ли ваш стек для Network Graph, свяжитесь с нами для бесплатного аудита.

Пример базового графа с react-force-graph

npm install react-force-graph-2d 

import ForceGraph2D from 'react-force-graph-2d'; import { useCallback, useRef, useState } from 'react'; interface Node { id: string; name: string; type: 'service' | 'database' | 'external'; group: number; } interface Link { source: string; target: string; label?: string; weight?: number; } function ServiceDependencyGraph({ nodes, links }) { const graphRef = useRef(); const [selectedNode, setSelectedNode] = useState(null); const [hoveredNode, setHoveredNode] = useState(null); // Подсветка связей выбранного узла const highlightedLinks = useMemo(() => { if (!selectedNode) return new Set(); return new Set( links.filter(l => l.source === selectedNode.id || l.target === selectedNode.id) .map(l => `${l.source}-${l.target}`) ); }, [selectedNode, links]); const nodeColor = useCallback((node) => { const colors = { service: '#3b82f6', database: '#22c55e', external: '#f59e0b' }; if (selectedNode && node.id !== selectedNode.id) { const isRelated = links.some(l => (l.source === selectedNode.id && l.target === node.id) || (l.target === selectedNode.id && l.source === node.id) ); return isRelated ? colors[node.type] : '#d1d5db'; } return colors[node.type] ?? '#6b7280'; }, [selectedNode, links]); const nodeCanvasObject = useCallback((node, ctx, globalScale) => { const label = node.name; const fontSize = 12 / globalScale; const r = 6; // Узел ctx.beginPath(); ctx.arc(node.x, node.y, r, 0, 2 * Math.PI); ctx.fillStyle = nodeColor(node); ctx.fill(); if (selectedNode?.id === node.id) { ctx.strokeStyle = '#1d4ed8'; ctx.lineWidth = 2 / globalScale; ctx.stroke(); } // Метка ctx.font = `${fontSize}px Sans-Serif`; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillStyle = '#374151'; ctx.fillText(label, node.x, node.y + r + fontSize); }, [nodeColor, selectedNode]); const linkColor = useCallback((link) => { const key = `${link.source.id ?? link.source}-${link.target.id ?? link.target}`; return highlightedLinks.has(key) ? '#3b82f6' : '#e5e7eb'; }, [highlightedLinks]); return ( <div className="relative border border-gray-200 rounded-xl overflow-hidden" style={{ height: 600 }}> <ForceGraph2D ref={graphRef} graphData={{ nodes, links }} nodeId="id" nodeLabel="name" nodeCanvasObject={nodeCanvasObject} nodeCanvasObjectMode={() => 'replace'} linkColor={linkColor} linkWidth={link => (link.weight ?? 1) * 0.5} linkDirectionalArrowLength={3} linkDirectionalArrowRelPos={1} linkLabel="label" onNodeClick={(node) => { setSelectedNode(prev => prev?.id === node.id ? null : node); }} onNodeHover={setHoveredNode} onBackgroundClick={() => setSelectedNode(null)} d3AlphaDecay={0.02} d3VelocityDecay={0.3} warmupTicks={50} cooldownTicks={200} /> {/* Инфопанель */} {selectedNode && ( <div className="absolute top-4 right-4 bg-white border rounded-lg shadow-lg p-4 w-64"> <h3 className="font-semibold text-gray-800">{selectedNode.name}</h3> <p className="text-sm text-gray-500 capitalize">{selectedNode.type}</p> <div className="mt-3"> <p className="text-xs text-gray-500">Входящие связи:</p> <ul className="text-sm"> {links.filter(l => (l.target.id ?? l.target) === selectedNode.id) .map(l => <li key={l.source.id ?? l.source}>← {l.source.name ?? l.source}</li>)} </ul> </div> </div> )} {/* Легенда */} <div className="absolute bottom-4 left-4 bg-white/90 rounded-lg p-3 text-xs"> <div className="flex items-center gap-2 mb-1"> <div className="w-3 h-3 rounded-full bg-blue-500" /> Сервис </div> <div className="flex items-center gap-2 mb-1"> <div className="w-3 h-3 rounded-full bg-green-500" /> База данных </div> <div className="flex items-center gap-2"> <div className="w-3 h-3 rounded-full bg-yellow-500" /> Внешний API </div> </div> </div> ); } 

3D-граф

import ForceGraph3D from 'react-force-graph-3d'; function Graph3D({ data }) { return ( <ForceGraph3D graphData={data} nodeAutoColorBy="group" nodeLabel="name" linkDirectionalParticles={2} linkDirectionalParticleSpeed={0.006} backgroundColor="#0f172a" /> ); } 

Большие графы с Sigma.js

npm install sigma graphology @react-sigma/core 

Sigma.js рендерит через WebGL — справляется с 50k+ узлов. Используйте Sigma.js если нужна максимальная производительность.

import { SigmaContainer, useLoadGraph, useRegisterEvents } from '@react-sigma/core'; import Graph from 'graphology'; function LargeGraph({ graphData }) { return ( <SigmaContainer style={{ height: 600 }} settings={{ nodeProgramClasses: {} }}> <GraphLoader data={graphData} /> </SigmaContainer> ); } 

Процесс работы

1. Аналитика — изучаем источники данных для визуализации графов связей, уточняем требования по интерактивности (zoom, highlight, фильтры).
2. Проектирование — выбираем layout (force-directed, circular, hierarchical), определяем схему цветов и размеров.
3. Разработка — реализуем компонент, оптимизируем рендеринг (виртуализация узлов, LOD).
4. Тестирование — проверяем на реальных данных, замеряем FPS, исправляем баги.
5. Деплой — встраиваем в сайт, настраиваем CDN для тяжёлых ассетов.

Сроки и стоимость

Сроки: от 1,5 недель (базовый граф) до 1 месяца (комплексное решение с Sigma.js + 3D). Стоимость рассчитывается индивидуально после аудита данных. Оптимизация бюджета проекта возможна за счёт выбора менее затратного стека. Как показывает практика, граф окупается в течение месяца после внедрения за счёт сокращения времени на поиск ошибок. Например, один из клиентов сократил время поиска зависимостей с 4 часов до 15 минут, что сэкономило ему более 150 000 руб. в месяц. Мы гарантируем стабильную работу на мобильных устройствах и в старых браузерах. Закажите аудит — мы определим оптимальное решение для ваших данных.

Что входит в работу

• Адаптация графа под ваш стек (React, Vue, Angular)
• Исходный код в виде npm-пакета или компонента
• Документация по API и кастомизации
• Тестовая интеграция с вашими данными
• 2 недели технической поддержки после сдачи