Разработка визуализации оргструктуры (Org Chart) на сайте

Представьте: на сайте крупной компании отдел кадров вручную обновляет список сотрудников в PDF. Через неделю данные устаревают, иерархия путается, а поиск конкретного специалиста превращается в квест. В одном из проектов для EdTech-компании с 500+ сотрудниками мы заменили ручной PDF на интерактивное дерево, что сократило время поиска контакта с 5 минут до 10 секунд и сэкономило компании 150 000 рублей в год. Мы решаем эту задачу с помощью интерактивной визуализации оргструктуры (Org Chart) — динамического дерева сотрудников с карточками, связями и поиском. Такой инструмент не только упрощает навигацию, но и служит единым источником правды для всей команды.

Наш опыт — 10 лет на рынке, более 50 проектов для EdTech, ритейла и госсектора. Мы интегрируем Org Chart с 1С, SAP и любыми HR-системами через REST API. Ниже разберём ключевые подходы к реализации.

Как выбрать библиотеку для интерактивного Org Chart?

Выбор библиотеки зависит от требований. Если нужен максимальный контроль над рендерингом и нестандартная верстка карточек — d3-hierarchy. Если проект типовой и нужно быстро запустить — react-organizational-chart (он в 3 раза быстрее на старте). Для enterprise с drag-n-drop — OrgChart.js.

Почему мы используем d3-hierarchy?

В сложных проектах (сеть из 2000+ сотрудников, глубина иерархии до 10 уровней) d3-hierarchy даёт в 2 раза больше гибкости, чем react-organizational-chart. Мы контролируем каждый пиксель: кастомные карточки с аватарами, прогресс-барами, действиями. Поддерживаем ленивую загрузку подузлов — дерево раскрывается при клике, что сокращает начальный рендеринг до 100 мс.

Отметим: как указано в d3-hierarchy, эта библиотека предоставляет алгоритмы для древовидных структур с полным контролем над компоновкой.

d3-hierarchy + React

import { hierarchy, tree } from 'd3-hierarchy'; import { useState, useMemo } from 'react'; interface Employee { id: string; name: string; position: string; department: string; avatarUrl?: string; children?: Employee[]; } function OrgChart({ data }: { data: Employee }) { const [expanded, setExpanded] = useState<Set<string>>(new Set([data.id])); const [hoveredId, setHoveredId] = useState<string | null>(null); const width = 900; const nodeWidth = 180; const nodeHeight = 80; const { nodes, links } = useMemo(() => { const root = hierarchy(data); const treeLayout = tree<Employee>() .nodeSize([nodeWidth + 20, nodeHeight + 40]) .separation((a, b) => (a.parent === b.parent ? 1.2 : 2)); const laid = treeLayout(root); return { nodes: laid.descendants(), links: laid.links() }; }, [data]); // Центрирование дерева const xs = nodes.map(n => n.x); const minX = Math.min(...xs); const maxX = Math.max(...xs); const treeWidth = maxX - minX + nodeWidth; const treeHeight = Math.max(...nodes.map(n => n.depth)) * (nodeHeight + 40) + nodeHeight + 20; const offsetX = (width - treeWidth) / 2 - minX; return ( <div className="overflow-auto"> <svg width={width} height={treeHeight + 20}> <g transform={`translate(0, 20)`}> {/* Связи */} {links.map((link, i) => ( <path key={i} d={`M${link.source.x + offsetX},${link.source.y + nodeHeight} C${link.source.x + offsetX},${(link.source.y + link.target.y + nodeHeight) / 2} ${link.target.x + offsetX},${(link.source.y + link.target.y + nodeHeight) / 2} ${link.target.x + offsetX},${link.target.y}`} fill="none" stroke="#d1d5db" strokeWidth={1.5} /> ))} {/* Узлы */} {nodes.map(node => ( <foreignObject key={node.data.id} x={node.x + offsetX - nodeWidth / 2} y={node.y} width={nodeWidth} height={nodeHeight} > <EmployeeCard employee={node.data} isHovered={hoveredId === node.data.id} hasChildren={!!node.data.children?.length} isExpanded={expanded.has(node.data.id)} onHover={setHoveredId} onToggle={(id) => setExpanded(prev => { const next = new Set(prev); next.has(id) ? next.delete(id) : next.add(id); return next; })} /> </foreignObject> ))} </g> </svg> </div> ); } function EmployeeCard({ employee, isHovered, onHover, onToggle, hasChildren, isExpanded }) { return ( <div className={`border rounded-lg bg-white p-2 shadow-sm text-center cursor-pointer transition-shadow ${isHovered ? 'shadow-md ring-2 ring-blue-300' : ''}`} onMouseEnter={() => onHover(employee.id)} onMouseLeave={() => onHover(null)} onClick={() => onToggle(employee.id)} > {employee.avatarUrl && ( <img src={employee.avatarUrl} className="w-8 h-8 rounded-full mx-auto mb-1" /> )} <p className="text-xs font-semibold text-gray-800 leading-tight">{employee.name}</p> <p className="text-xs text-gray-500">{employee.position}</p> {hasChildren && ( <span className="text-xs text-blue-400">{isExpanded ? '▲' : '▼'}</span> )} </div> ); } 

react-organizational-chart (упрощённый подход)

import { Tree, TreeNode } from 'react-organizational-chart'; function SimpleOrgChart({ data }) { return ( <Tree label={<OrgNode employee={data} />} lineWidth="2px" lineColor="#d1d5db" lineStyle="solid" > {data.children?.map(child => ( <OrgSubTree key={child.id} node={child} /> ))} </Tree> ); } function OrgSubTree({ node }) { return ( <TreeNode label={<OrgNode employee={node} />}> {node.children?.map(child => ( <OrgSubTree key={child.id} node={child} /> ))} </TreeNode> ); } function OrgNode({ employee }) { return ( <div className="inline-flex flex-col items-center bg-white border border-gray-200 rounded-lg px-3 py-2 shadow-sm min-w-32"> <span className="text-sm font-semibold">{employee.name}</span> <span className="text-xs text-gray-500">{employee.position}</span> </div> ); } 

Как мы работаем над Org Chart?

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

Базовая версия (кликабельные карточки, tree-рендеринг) — от 1 недели. Расширенная с поиском, zoom/pan, ленивой загрузкой подузлов — 1.5–2 недели. Стоимость рассчитывается индивидуально на основе объёма данных и необходимых интеграций. Закажите консультацию — мы оценим проект за 1 день.

Что вы получите

• Исходный код на GitHub с лицензией MIT.
• REST API для управления сотрудниками (CRUD).
• Демо-стенд с вашими данными.
• Документация по развертыванию и кастомизации.
• Час обучения команды (Zoom или очно).
• Гарантия на код — 6 месяцев бесплатных правок багов.

Как реализовать поиск по дереву?

function searchInHierarchy(root: Employee, query: string): Set<string> { const matchedIds = new Set<string>(); function traverse(node: Employee) { const matches = node.name.toLowerCase().includes(query.toLowerCase()) || node.position.toLowerCase().includes(query.toLowerCase()); if (matches) matchedIds.add(node.id); node.children?.forEach(traverse); } traverse(root); return matchedIds; } 

Поиск работает за O(n) в худшем случае, но для 2000 узлов это не заметно. Подсветка найденных узлов и автоматическое раскрытие пути к ним делают навигацию удобной. Дополнительно мы реализуем клавиатурную навигацию и ARIA-атрибуты для доступности. Дерево адаптируется под мобильные экраны с помощью горизонтальной прокрутки. Благодаря этой функции компания экономит до 80 000 рублей в год на поиске сотрудников.

Как выполнить интеграцию с 1С

1. Настройте REST API в 1С:Зарплата и управление персоналом.
2. Создайте endpoint для выгрузки справочника сотрудников.
3. Настройте веб-хук для инкрементального обновления.
4. На стороне сайта реализуйте импорт данных в формате JSON.
5. Запустите синхронизацию по расписанию.

Свяжитесь с нами, чтобы обсудить ваш проект. Напишите — и мы подготовим демо под вашу структуру. Получите консультацию бесплатно. Мы предлагаем разработку на заказ любого уровня сложности.