Разработка кастомных визуализаций данных на Visx (D3 + React)

Когда нужна кастомная визуализация на Visx?

Типовой запрос от клиента: отобразить динамику курса акций за последний год с возможностью приближения и тултипами. Recharts не справляется с нестандартной анимацией, Chart.js тормозит на 50 000 точках. Нужна кастомная визуализация на Visx — библиотеке Airbnb, объединяющей гибкость D3 с парадигмой React. Visx позволяет строить любые SVG-графики с полным контролем и высокой производительностью. Мы используем его в проектах с датасетами до 100 000 записей, обеспечивая плавную анимацию и мгновенное обновление.

Какие проблемы решает Visx?

Ограниченная кастомизация готовых библиотек

Recharts предлагает множество конфигураций, но любое отклонение от шаблона превращается в хак с переопределением пропсов. Visx дает полный контроль над SVG: вы управляете каждым элементом, шкалами и переходами.

Производительность на больших объёмах данных

D3-рендеринг через React-жизненный цикл может вызывать лишние ререндеры. Visx оптимизирует это за счет чистых компонентов и мемоизации. На практике мы добиваемся 60 FPS на датасетах из 10 000 точек.

Интеграция с React-приложением

Visx-компоненты — это обычные React-компоненты, которые легко встраиваются в любую архитектуру: Next.js, CRA, Vite. Не нужно подключать отдельный рендерер или контекст.

Как Visx решает задачу кастомизации?

Visx предлагает низкоуровневые примитивы: scaleTime, scaleLinear, LinePath, AreaClosed, AxisLeft, AxisBottom. Из них собирается любой график без оглядки на шаблоны. Для интерактива — хук useTooltip и события мыши. Весь код — TypeScript с типизацией данных.

Возьмем типовую задачу: линейный график с тултипом и зоной заливки. Пример реализации на Visx (фрагмент):

import { scaleTime, scaleLinear } from '@visx/scale';
import { LinePath, AreaClosed } from '@visx/shape';
import { AxisLeft, AxisBottom } from '@visx/axis';
import { GridRows, GridColumns } from '@visx/grid';
import { useTooltip, TooltipWithBounds, defaultStyles } from '@visx/tooltip';
import { localPoint } from '@visx/event';
import { bisector } from 'd3-array';
import { curveMonotoneX } from 'd3-shape';

interface DataPoint {
  date: Date;
  value: number;
}

const bisectDate = bisector<DataPoint, Date>(d => d.date).left;

function CustomLineChart({
  data,
  width,
  height,
  margin = { top: 20, right: 20, bottom: 40, left: 60 }
}: {
  data: DataPoint[];
  width: number;
  height: number;
  margin?: { top: number; right: number; bottom: number; left: number };
}) {
  const innerWidth = width - margin.left - margin.right;
  const innerHeight = height - margin.top - margin.bottom;

  const xScale = scaleTime({
    range: [0, innerWidth],
    domain: [
      Math.min(...data.map(d => d.date.getTime())),
      Math.max(...data.map(d => d.date.getTime()))
    ]
  });

  const yScale = scaleLinear({
    range: [innerHeight, 0],
    domain: [0, Math.max(...data.map(d => d.value)) * 1.1],
    nice: true
  });

  const { tooltipData, tooltipLeft, tooltipTop, showTooltip, hideTooltip } = useTooltip<DataPoint>();

  const handleTooltip = (event: React.MouseEvent<SVGRectElement>) => {
    const { x } = localPoint(event) || { x: 0 };
    const x0 = xScale.invert(x - margin.left);
    const index = bisectDate(data, x0, 1);
    const d0 = data[index - 1];
    const d1 = data[index];
    const d = !d1 || Math.abs(x0.getTime() - d0.date.getTime()) < Math.abs(x0.getTime() - d1.date.getTime()) ? d0 : d1;
    showTooltip({
      tooltipData: d,
      tooltipLeft: xScale(d.date) + margin.left,
      tooltipTop: yScale(d.value) + margin.top
    });
  };

  return (
    <div style={{ position: 'relative' }}>
      <svg width={width} height={height}>
        <g transform={`translate(${margin.left}, ${margin.top})`}>
          <GridRows scale={yScale} width={innerWidth} stroke="#f0f0f0" />
          <GridColumns scale={xScale} height={innerHeight} stroke="#f0f0f0" />
          <defs>
            <linearGradient id="areaGradient" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#3b82f6" stopOpacity={0.3} />
              <stop offset="100%" stopColor="#3b82f6" stopOpacity={0} />
            </linearGradient>
          </defs>
          <AreaClosed
            data={data}
            x={d => xScale(d.date)}
            y={d => yScale(d.value)}
            yScale={yScale}
            fill="url(#areaGradient)"
            curve={curveMonotoneX}
          />
          <LinePath
            data={data}
            x={d => xScale(d.date)}
            y={d => yScale(d.value)}
            stroke="#3b82f6"
            strokeWidth={2}
            curve={curveMonotoneX}
          />
          <AxisLeft scale={yScale} tickFormat={v => `${(v as number / 1000).toFixed(0)}k`} />
          <AxisBottom top={innerHeight} scale={xScale} tickFormat={d => format(d as Date, 'dd MMM')} />
          <rect
            width={innerWidth}
            height={innerHeight}
            fill="transparent"
            onMouseMove={handleTooltip}
            onMouseLeave={hideTooltip}
          />
          {tooltipData && (
            <g>
              <line
                x1={tooltipLeft! - margin.left}
                x2={tooltipLeft! - margin.left}
                y1={0}
                y2={innerHeight}
                stroke="#3b82f6"
                strokeDasharray="4,4"
                strokeWidth={1}
              />
              <circle
                cx={tooltipLeft! - margin.left}
                cy={tooltipTop! - margin.top}
                r={5}
                fill="#3b82f6"
                stroke="white"
                strokeWidth={2}
              />
            </g>
          )}
        </g>
      </svg>
      {tooltipData && (
        <TooltipWithBounds
          top={tooltipTop}
          left={tooltipLeft}
          style={{ ...defaultStyles, background: '#1e293b', color: 'white' }}
        >
          <div>
            <strong>{format(tooltipData.date, 'dd.MM.yyyy')}</strong>
            <br />
            {tooltipData.value.toLocaleString('ru')} $
          </div>
        </TooltipWithBounds>
      )}
    </div>
  );
}

ParentSize для адаптивности

import { ParentSize } from '@visx/responsive';

function ResponsiveChart({ data }) {
  return (
    <ParentSize>
      {({ width, height }) => (
        <CustomLineChart data={data} width={width} height={height || 300} />
      )}
    </ParentSize>
  );
}

Почему Visx, а не Chart.js?

Visx лучше Chart.js в ситуациях, где требуется нестандартная форма графика или сложные интерактивные сценарии. Chart.js проще в настройке и быстрее для простых диаграмм, но его архитектура хуже масштабируется под кастомные задачи. Visx дает полный доступ к SVG, что позволяет реализовать любую визуализацию. Наши клиенты экономят до 40% времени на разработке сложных дашбордов за счет использования Visx.

Сравнение Visx и Recharts

Типичные ошибки при работе с Visx

• Пропуск мемоизации шкал. Шкалы нужно создавать внутри useMemo или вне компонента, иначе каждый ререндер будет пересоздавать их, что ведёт к потере производительности.
• Игнорирование ParentSize. Без адаптивного контейнера график не будет реагировать на изменение размеров окна, что ломает UX на мобильных устройствах.
• Некорректная обработка краёв данных. Если данные содержат NaN или null, Visx может выбросить ошибку. Всегда фильтруйте данные перед передачей в компоненты.
• Забыли про accessibility. SVG-графика должна быть доступна для скринридеров: добавляйте role="img" и aria-label.

Как создать кастомный график с нуля?

1. Определите шкалы — scaleTime для времени, scaleLinear для значений.
2. Опишите геометрию — LinePath для линии, AreaClosed для заливки.
3. Добавьте оси — AxisLeft и AxisBottom.
4. Реализуйте тултип — используйте хук useTooltip и события мыши.
5. Оберните в адаптивный контейнер — ParentSize для автоматического ресайза.

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

Полный цикл разработки одного типа визуализации занимает от 3 до 5 дней. Комплект из 3–4 различных типов — от 1.5 до 2 недель. Стоимость работ рассчитывается индивидуально и зависит от сложности интерактива и объёма данных.

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

Мы выполняем разработку визуализации данных на Visx под ключ:

• анализ требований и проектирование макета;
• написание кода с нуля на React + TypeScript;
• тестирование на реальных данных (до 100 000 записей);
• адаптация под мобильные экраны и retina-дисплеи;
• документация в README и инлайн-комментариях;
• передача доступов к репозиторию и деплою;
• обучение вашей команды работе с Visx (вебинар 1 час).

Свяжитесь с нами для обсуждения вашей задачи. Получите консультацию по кастомной визуализации.