Приходилось ли работать с библиотеками для построения графиков, рисования на SVG или Canvas

Что проверяют

Умеете ли вы выбирать инструмент под задачу, а не тянуть привычную библиотеку в любой проект. Ключевое различие здесь между графикой в виде узлов документа и растровой отрисовкой, и интервьюер ждёт, что вы объясните, когда что уместно.

Как отвечать

Разложите по слоям:

• готовые библиотеки графиков закрывают типовые линии, столбцы и круги быстро, вместе с легендой, подсказками и адаптивностью;
• низкоуровневый инструмент вроде D3 нужен, когда визуализация нестандартная. Он про расчёты: шкалы, оси, геометрия, а сам рендер можно оставить фреймворку;
• SVG это узлы документа: события, стили, доступность и чёткость при любом масштабе, но на тысячах элементов браузер начинает задыхаться;
• Canvas это растр: десятки тысяч точек рисуются легко, зато попадание курсора, выделение и доступность придётся делать руками. Когда точек сотни тысяч, остаётся WebGL.

Полезные детали из практики: масштабирование холста под devicePixelRatio, перерисовка по requestAnimationFrame, реакция на изменение размеров через ResizeObserver, ленивая загрузка тяжёлой библиотеки отдельным чанком и текстовая альтернатива к графику для скринридера.

Где спотыкаются

Рисуют огромный массив точек в SVG. Каждая точка это узел со стилями и обработчиками, и страница встаёт. Данные почти всегда можно проредить или агрегировать до отрисовки, а если нужны действительно все точки, это повод уйти на холст.

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

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