D3.js - библиотека визуализации, предоставляющая все необходимые функции и методы, необходимые для создания диаграмм и графиков. Vue.js - MVC-фреймворк для создания одностраничных приложений (SPA).

Настоящая проблема заключается в том, что как D3, так и Vue.js способны манипулировать элементами DOM. Но в этой статье мы сконцентрируемся только на использовании D3 для вычисления всех необходимых частей рендеринга, Vue.js используется для создания и модификации DOM.

Это также пошаговая инструкция о том, как реализовать компонент для работы с графиком в Vue.JS, используя библиотеку D3, и его дальнейшее усовершенствование.

Неправильный путь

Это первая реализация, которая сделана на основе большинства примеров, найденных в Интернете:

Вначале кажется, что это работает неплохо, но:

• график не меняется при изменении размеров экрана;
• данные статичны;
• график выводится только раз;
• стиль жестко закодирован.

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

5 простых правил

Правило 1: Отдавайте предпочтение viewBox вместо ширины и высоты

Мы хотим сделать наши SVG-изображения отзывчивыми (подстраивающимися к дизайну). Ширина и высота ограничивают нашу реализацию определенными размерами. Установив вместо этого Viewbox, можно масштабировать SVG изображение, чтобы заполнить весь контейнер.

Правило 2: Написать шаблон SVG в шаблоне

Большинство примеров D3.js в Интернете предпочитают использовать функцию append и прикреплять элементы DOM к уже существующим. Поскольку теперь мы используем Vue.js, лучше использовать вместо него только раздел template.

Правило 3: Пишите стили в разделе стилей

Поскольку SVG поддерживает добавление классов и элементов стиля в CSS, лучше писать стили в style-разделе, чем иметь жестко закодированные значения в коде Javascript.

В этом правиле есть исключение, если вы хотите ввести стиль как свойство компонента.

Правило 4: Используйте параметры для предоставления данных

Конечно, мы хотим, чтобы наш компонент можно было повторно использовать и динамически менять данные в нашем графике. Как и большинство примеров с Vue.js и SVG, найденных в Интернете, мы установили некоторые свойства для компонента, чтобы сделать его динамическим.

Как этот пример:

Теперь, когда мы установили параметр в props-области, мы также можем сделать следующее:

<SvgDemo title="John Snow"></SvgDemo>

И у нас все готово!

Правило 5: Используйте computed для расчета D3

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

Сначала были попытки использовать append- и attr-методы из библиотеки D3 для визуализации. Чтобы сделать рендеринг после каждого изменения, нужно было ввести watchers, удалить все элементы и заново выполнить рендеринг. Это решение уже было достаточно запутанным для разработчиков и плохо работало вместе с Vue.js. В конце концов, лучше выполнить вычисления в D3.js и связать их с Vue.js.

Все расчеты могут быть связаны непосредственно с DOM с помощью вычисляемых свойств (computed). Таким образом, вычисления будут выполняться каждый раз, когда изменяется информация в данных. Но об этом не стоит беспокоиться. Vue.js достаточно умен, чтобы вызывать функции только при необходимости.

Правильный путь

После применения всех приведенных выше правил предыдущий пример должен выглядеть так:

Проверьте все эти функции в computed-области! Они могут быть непосредственно использованы в template в настоящее время. Наиболее важным из них является line, что на самом деле рисует диаграммы благодаря D3.js. Каждый раз, когда мы меняем данные в data, остальные функции будут вызываться повторно, и line будет возвращать новое значение. А график будет перерисован снова!

Теперь в этом примере:

• График отзывчив (как и каждый SVG!);
• свойства данных могут быть использованы для динамической загрузки данных в график;
• график будет отображать любые изменения в данных автоматически;
• CSS-классы могут использоваться для переопределения стилей.