🏗️ Компоненты системы

API Gateway
Auth Service (Critical)
User Service
Payment Service (Critical)
Database
Redis Cache (SPOF!)
Notifications
Message Queue
Zoom: 100%
d-item">
Auth Service
User Service
Catalog Service
Order Service
Payment Service
User DB
Order DB
Redis Cache
Zoom: 100%
оздание связей const linkElements = g.selectAll('.link') .data(links) .enter() .append('line') .attr('class', 'link') .attr('x1', d => nodes.find(n => n.id === d.source).x) .attr('y1', d => nodes.find(n => n.id === d.source).y) .attr('x2', d => nodes.find(n => n.id === d.target).x) .attr('y2', d => nodes.find(n => n.id === d.target).y); // Создание узлов const nodeElements = g.selectAll('.node') .data(nodes) .enter() .append('g') .attr('class', 'node') .attr('transform', d => `translate(${d.x}, ${d.y})`) .on('click', function(event, d) { event.stopPropagation(); // Убираем selection со всех узлов nodeElements.classed('selected', false); // Добавляем selection к текущему узлу d3.select(this).classed('selected', true); // Показываем связанные узлы highlightConnectedNodes(d.id); }) .on('mouseover', function(event, d) { tooltip.transition() .duration(200) .style('opacity', 1); tooltip.html(` ${d.name}
Тип: ${d.type}
ID: ${d.id} `) .style('left', (event.pageX + 10) + 'px') .style('top', (event.pageY - 28) + 'px'); }) .on('mouseout', function(d) { tooltip.transition() .duration(500) .style('opacity', 0); }); // Добавляем прямоугольники для узлов nodeElements.append('rect') .attr('width', 100) .attr('height', 40) .attr('x', -50) .attr('y', -20) .attr('fill', d => nodeColors[d.type]) .attr('stroke', '#45475a'); // Добавляем текст для узлов nodeElements.append('text') .text(d => d.name) .attr('dy', '.35em'); // Обработчики кнопок document.getElementById('resetBtn').addEventListener('click', () => { svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity ); nodeElements.classed('selected', false); linkElements.classed('critical-path', false); updateZoomInfo(1); }); document.getElementById('zoomInBtn').addEventListener('click', () => { svg.transition().duration(300).call( zoom.scaleBy, 1.5 ); }); document.getElementById('zoomOutBtn').addEventListener('click', () => { svg.transition().duration(300).call( zoom.scaleBy, 1 / 1.5 ); }); document.getElementById('criticalPathBtn').addEventListener('click', () => { showCriticalPath(); }); // С