Как мы делали график с горизонтальным скроллом на d3.js

Если в приложении нужно выводить много графических данных, диаграмм, интерактивных виджетов – важно позаботиться о UX, чтобы пользователю было удобно работать. Способ вывода данных особенно важен, если приложение открывают и на мониторах, и на смартфонах. Делимся опытом, как мы реализовали достаточно нетривиальное решение – кастомный скролл с помощью библиотеки визуализации данных d3.js.

Привет, Хабр! Сегодня хотим поделиться с вами опытом решения одной непростой задачи с помощью библиотеки визуализации данных d3.js. Для начала расскажем предысторию.

Проект, над которым мы работали – приложение для мониторинга эффективности работы менеджеров. Его отличительной особенностью было наличие множества интерактивных виджетов, в частности, графиков.

Один из таких графиков представлял собой диаграмму Ганта и должен был отображать длительность и дату рабочих смен сотрудников на интервале в полгода. Нам нужно было выводить диаграмму в полном размере как на мобильных устройствах, так и на мониторах. Из-за этого требования от решения overflow-x: auto пришлось отказаться: тыкать мышкой на скроллбар на мониторе – такой себе UX. Решили делать кастомный скролл. Но оказалось, что это не так-то просто реализовать, поэтому спешим поделиться с вами своим опытом.

Пример: что надо было сделать.

Мы покажем пример реализации на React, но то же самое можно реализовать на любом другом фреймворке. Для работы с графиком мы выбрали d3.js как очень популярное и проверенное решение. Из этой библиотеки нам понадобятся функции масштабирования для осей и обработчики для определения скролла. Но об этом чуть позже, для начала нужно решить проблему с интеграцией d3 в React.

Суть проблемы в том, что d3.js напрямую манипулирует DOM, что недопустимо в связке с современными фреймворками, так как они полностью берут на себя все манипуляции с DOM-деревом и вмешательство в этот процесс другой библиотеки приведёт к багам обновления интерфейса. Поэтому нужно разделить их зоны ответственности. Мы сделали это так: React манипулирует DOM, а d3 производит необходимые расчёты. Этот вариант интеграции нам оптимально подошёл, так как он позволяет использовать оптимизации react по обновлению DOM и привычный JSX синтаксис (о других возможных вариантах можно почитать здесь). Далее в примерах покажем, как это реализовывается.

Теперь можно приступить к разработке!

Базовая реализация скролла

Начнём с вёрстки:

<div ref={ganttContainerRef} className={gantt}>   <svg className={gantt__chart} ref={svgRef}>     <g ref={scrollGroupRef}>       <GanttD3XAxis />       <GanttD3Bars data={data} />     </g>     <GanttD3YAxis data={data} />   </svg> </div>

Нам нужны две оси. По Y выводим имена сотрудников, по X даты. Скроллиться будет блок с осью X и полосками, они обёрнуты в тег group.

Теперь импортируем нужные функции из d3:

import { event, select } from "d3-selection"; import { zoom, zoomIdentity, zoomTransform } from "d3-zoom"; import { scaleTime } from "d3-scale";

Функции event и select нужны для обработки событий в обработчике zoom и для выбора dom-элементов.

С помощью функции zoom мы и будем реализовывать горизонтальную прокрутку: эта функция навешивает на элемент обработчики событий для реализации зумирования и dragndrop.

Вызов zoomTransform позволяет определить, насколько пользователь сместил элемент: каждый новый клик начинается с тех значений, на которых закончился предыдущий. Чтобы сбросить координаты в памяти, используем zoomIdentity.

Последняя функция scaleTime масштабирует даты на координатную ось. С её помощью напишем функцию масштабирования на ось X:

export const dateScale = date => {   const { startDate, endDate, chartWidth } = chartConfig;   const scale = scaleTime()     .domain([startDate, endDate])     .range([0, chartWidth]);   return scale(date); };

В аргументе метода domain указывается временной интервал: его нужно масштабировать на ось, длину которой передаем в аргументе метода range.

Теперь напишем обработчик события zoom. Именно в нём и будет реализована прокрутка.

const onZoom = (scrollGroup, ganttContainer) => {   const ganttContainerWidth =    ganttContainer.getBoundingClientRect().width;   const marginLeft = yAxisWidth + lineWidth;   const transform = zoomTransform(scrollGroup.node());   const maxStartTranslate = chartWidth / 2;   const maxEndTranslate = ganttContainerWidth - chartWidth / 2 -   marginLeft;    transform.x = Math.max(transform.x, maxEndTranslate);   transform.x = Math.min(transform.x, maxStartTranslate);    const translateX = defaultTranslate + transform.x;   scrollGroup.attr("transform", `translate( ${translateX} ,   0)`); };

Пока что нас интересуют только выделенные строчки, так как вся «магия» заключается в них.

Сначала достаем текущее смещение элемента:

const transform = zoomTransform(scrollGroup.node());

Далее вычисляем новое значение прокрутки элемента и передаем его в свойство translate:

const translateX = defaultTranslate + transform.x;   scrollGroup.attr("transform", `translate( ${translateX} ,   0)`);

Осталось подключить zoom-окружение к элементу:

 useEffect(() => {     const scrollGroup = select(scrollGroupRef.current);     const ganttContainer = ganttContainerRef.current;      const d3Zoom = zoom()       .scaleExtent([1, 1])       .on("zoom", () => onZoom(scrollGroup, ganttContainer));     select(ganttContainer)       .call(d3Zoom);       select(ganttContainer).call(d3 Zoom.transform,zoomIdentity);      scrollGroup.attr("transform", `translate(${defaultTranslate} , 0)`);   });

На этом практически всё, скролл работает! Осталось добавить одну крутую фичу и устранить один неприятный баг.

Фича: свайп двумя пальцами

Начнём с фичи. Пользователи macbook или хороших Windows-ноутбуков знают, что скроллить горизонтально гораздо удобнее с помощью тачпада. Свайпаем двумя пальцами влево или вправо, и элемент прокручивается. Наш график пока так не умеет. Научим его!

Для этого добавим обработчики на событие колёсика мыши (именно так браузер распознает этот жест тачпада):

select(ganttContainer)   .call(d3Zoom)   .on("wheel.zoom", () => {     onZoom(scrollGroup, ganttContainer);   });  const onZoom = (scrollGroup, ganttContainer) => {    const ganttContainerWidth = ganttContainer.getBoundingClientRect().width;    const marginLeft = yAxisWidth + lineWidth;    const transform = zoomTransform(scrollGroup.node());    const { type, deltaY, wheelDeltaX } = event;    const maxStartTranslate = chartWidth / 2;    const maxEndTranslate = ganttContainerWidth - chartWidth / 2 - marginLeft;     if (type === "wheel") {      if (deltaY !== 0) return null;      transform.x += wheelDeltaX;    }     transform.x = Math.max(transform.x, maxEndTranslate);    transform.x = Math.min(transform.x, maxStartTranslate);     const translateX = defaultTranslate + transform.x;    scrollGroup.attr("transform", `translate( ${translateX} , 0)`);  };

Ничего сложно, просто к прибавляем прокрутку колёсика к transform.x. Всё! Теперь график умеет скроллиться по жестам трекпада.

Баг: перехват касаний

Теперь поправим баг. Дело в том, что наш обработчик zoom перехватывает события касания и интерпретирует их как жесты для зуммирования. Поэтому, когда пользователь попадает пальцем на график, то он не может прокручивать сайт вниз.

Чтобы решить эту проблему, нам нужно определять направление свайпа пользователя и в зависимости от него включать либо горизонтальный скролл графика, либо вертикальную прокрутку страницы.

Сначала создаём необходимые переменные:

const scrollXDisabled = useRef(false);   const startXRef = useRef(0);   const startYRef = useRef(0);   const isXPanRef = useRef(false);   const isYPanRef = useRef(false);

Далее пишем обработчик для фиксирования координат старта касания:

const onTouchStart = () => {     const touch = getTouchObject(event);     startXRef.current = touch.pageX;     startYRef.current = touch.pageY;   };

Теперь нужно определить направление свайпа и включить нужную прокрутку:

const onTouchMove = () => {     const touch = getTouchObject(event);     const diffX = startXRef.current - touch.pageX;     const diffY = startYRef.current - touch.pageY;      if (diffX >= 10 || diffX <= -10) {       isXPanRef.current = true;     }      if (diffY >= 3 || diffY <= -3) {       isYPanRef.current = true;     }      if (!isXPanRef.current && isYPanRef.current &&   !scrollXDisabled.current) {       select(ganttContainerRef.current).on(".zoom", null);       scrollXDisabled.current = true;     }     if (scrollXDisabled) window.scrollBy(0, diffY);   };

Для diffX и diffY задаём небольшую погрешность, чтобы обработчик не срабатывал на малейшее дрожание пальца.

После того, как пользователь убрал палец, возвращаем всё в изначальное состояние:

const onTouchEnd = zoomBehavior => {   select(ganttContainerRef.current).call(zoomBehavior);   scrollXDisabled.current = false;   isXPanRef.current = false;   isYPanRef.current = false; }; 

Осталось навесить наши обработчики на zoom-окружение:

select(ganttContainer)       .call(d3Zoom)       .on("touchstart", onTouchStart, true)       .on("touchmove", onTouchMove, true)       .on(         "touchend",         () => {           onTouchEnd(d3Zoom);         },         true  );

Готово! Теперь наш график понимает, что хочет сделать пользователь. Полный пример кода и реализацию этого графика на canvas можно посмотреть здесь.

Спасибо за внимание! Надеемся, что статья была вам полезна.