Недавно работал над проектом с визуализацией данных и хочу поделиться подходом к интеграции D3.js с React, который оказался наиболее эффективным. Ключевая идея: React отвечает за DOM, а D3 — за вычисления:import { useRef, useEffect, useState } from 'react'; import * as d3 from 'd3'; function BarChart({ data, width = 600, height = 400 }) { const svgRef = useRef(null); const [tooltip, setTooltip] = useState({ show: false, x: 0, y: 0, value: '' }); useEffect(() => { if (!data || !svgRef.current) return; const svg = d3.select(svgRef.current); // Настраиваем масштабирование const xScale = d3.scaleBand() .domain(data.map(d => d.label)) .range([0, width]) .padding(0.1); const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .nice() .range([height, 0]); // Создаем оси const xAxis = d3.axisBottom(xScale); svg.select('.x-axis') .attr('transform', translate(0, &#036;{height})) .call(xAxis); const yAxis = d3.axisLeft(yScale); svg.select('.y-axis').call(yAxis); // Просто подготавливаем данные для React // D3 не манипулирует DOM напрямую }, [data, width, height]); return ( <div className="chart-container"> <svg ref={svgRef} width={width} height={height}> <g className="x-axis" /> <g className="y-axis" /> {data?.map((d, i) => ( <rect key={d.label} x={d3.scaleBand() .domain(data.map(d => d.label)) .range([0, width]) .padding(0.1)(d.label)} y={d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .nice() .range([height, 0])(d.value)} width={d3.scaleBand() .domain(data.map(d => d.label)) .range([0, width]) .padding(0.1).bandwidth()} height={height - d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .nice() .range([height, 0])(d.value)} fill="#4299e1" onMouseEnter={(e) => { setTooltip({ show: true, x: e.clientX, y: e.clientY, value: d.value }); }} onMouseLeave={() => setTooltip({ show: false, x: 0, y: 0, value: '' })} /> ))} </svg> {tooltip.show && ( <div className="tooltip" style={{ left: tooltip.x, top: tooltip.y }} > {tooltip.value} </div> )} </div> ); } Преимущества такого подхода: — React управляет DOM, что делает анимации более плавными — Работают стандартные оптимизации React — Проще привязывать интерактивные события — Код лучше структурирован и легче тестируется Для сложных графиков этот подход позволяет создавать гораздо более отзывчивые и производительные визуализации. Подписывайся на @frontendino