Розробка візуалізації графів зв'язків (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 тижні технічної підтримки після здачі