Модульная визуализация данных с помощью Vue.js и D3

Фон

"Исходный код"

В 2019 году почти нет причин рассказывать предысторию Vue.js перед тем, как погрузиться в нее; его беспрецедентная популярность уже сделала его нарицательным среди веб-разработчиков, и не без уважительной причины. Vue делает много замечательных вещей под капотом, помогая создавать веб-приложения, но его самая большая претензия на известность может заключаться не в самой основной технологии, а скорее в опыте разработчика, который она создает.

Разборчивость и доступность - ключевая часть этого опыта разработчика. Возможность быстрее читать и понимать код благодаря синтаксису и модульной структуре Vue делает работу более доступной и снижает разочарование. Благодаря этой силе Vue является идеальным фреймворком для комбинирования с богатой / сложной библиотекой. Воспользовавшись удобочитаемостью и модульностью Vue, можно упростить интерфейс с такой библиотекой, разбив ее на более мелкие, многоразовые части и обернув упрямый синтаксис идиоматическим стилем Vue.

В нашем случае это богатая библиотека D3. В последние годы D3 была одной из передовых библиотек визуализации данных для JavaScript, и благодаря видению создателя Майка Бостока разработка все еще продолжается. Что отличает D3 от многих других библиотек, так это возможность бесконечной настройки. Его низкоуровневый API обеспечивает прямой контроль над собственными элементами SVG, но он также требует длительного обучения. Исходя из этой парадигмы, мы собираемся объединить D3 и Vue, используя динамическую привязку данных Vue, разборчивый синтаксис и модульную структуру, чтобы выявить лучшее в D3.

Проэкт

Мы собираемся использовать D3 и Vue для создания базового компонента гистограммы. Существует масса отличных руководств для этого в vanilla D3, но мы собираемся сосредоточиться на попытках написать идиоматический Vue, а не идиоматический D3. Полный код этого проекта можно найти на CodeSandbox, и на него будут ссылаться в остальной части руководства.

Настраивать

Во-первых, нам нужно установить зависимости для нашего проекта. Мы могли бы просто установить и использовать весь D3 с npm i d3, но это может замедлить работу нашего приложения со всеми модулями, которые мы не используем, особенно с более тяжелым модулем d3-geo. Вместо этого мы установим только необходимые нам модули D3.

Следующим шагом будет создание нашего BarChart.vue файла и подготовка нашего App.vue или другого родительского компонента для визуализации гистограммы. В этом руководстве данные будут определены в родительском файле App.vue для удобства, но в других приложениях вы можете обрабатывать получение / настройку данных через Vuex, особенно если вы загружаете их из файла или другого внешнего источника. .

Компонент приложения

Мы также собираемся заранее передать некоторые реквизиты нашему компоненту линейчатой ​​диаграммы. Первой опорой будет сам массив данных, а двумя другими будет то, как мы определяем модель данных в D3. Вместо того, чтобы писать одноразовую диаграмму каждый раз, когда мы работаем с другим набором данных, мы собираемся попытаться сохранить возможности многократного использования, передав имена свойств в массиве данных, с которыми мы хотим, чтобы D3 работал. .

Определение компонента гистограммы

Создание компонента линейчатой ​​диаграммы начинается с импорта наших модулей D3 и определения свойств, которые мы передали в компоненте App.vue.

После этого мы формируем наш шаблон Vue для получения элементов SVG. Обратите внимание, что мы добавляем отдельные элементы <svg> <g> и <rect>, а не знакомые цепочки функций D3. Это позволит нам динамически привязать эти элементы к данным в нашем компоненте Vue и воспользоваться реактивностью Vue. Другой элемент, который следует выделить здесь, - это то, что мы собираемся динамически вычислять наши атрибуты ширины и высоты элемента <svg> - это сделано для того, чтобы контент оставался разборчивым на всех возможных размерах экрана и исключил рендеринг экрана.

Наблюдаемые свойства

Мы собираемся использовать здесь только одно наблюдаемое свойство, и это будет для нашей вычисленной ширины. Обычно мы использовали вычисляемое свойство для чего-то вроде этого, но нам нужно будет извлекать информацию из DOM после того, как элементы были отрисованы, а вычисляемые свойства выдают ошибки при попытке сделать это. Для этого свойства мы получим ширину родительского <div> гистограммы и установим нашу ширину равной 3/4 от этого измерения, чтобы создать некоторый буфер по краям.

Вычисленные свойства

Эти свойства станут одной из важнейших частей нашего компонента. Здесь мы можем разбить логику D3 на более удобоваримые биты и обновлять / использовать ее по мере того, как изменения происходят в реальном времени. Основная функция свойств прокомментирована в приведенном ниже коде, но для более глубокого понимания того, что делают функции D3, обратитесь к исходной документации D3 или D3 In Depth.

Создание стержней

Теперь, когда у нас есть функции масштабирования и другие вычисляемые свойства, мы можем начать добавлять полосы в шаблон. Мы сделаем это с помощью директивы v-for - пройдемся по массиву элементов данных и динамически присвоим их свойства элементу <rect> в DOM. Обратите внимание, что мы получаем доступ к отдельным элементам через свойства xKey и yKey, которые мы передали ранее. Это позволит нам повторно использовать один и тот же компонент независимо от того, содержит ли набор данных следующего проекта ключи «имя» и «сумма».

Еще одна важная вещь, на которую следует обратить внимание, - это то, что эти полосы еще не отображаются (redrawToggle) и не имеют высоты и расположения по оси Y, когда они это делают (y и height). Мы делаем это, потому что хотим анимировать диаграмму, что требует добавления этих свойств с переходом D3 после первоначального рендеринга.

Анимация диаграммы

Чтобы оживить диаграмму, создайте несколько методов для обертывания и модулирования нашей логики перехода. Анимация рисования состоит из присвоения правильных значений height и y <rect> элементам, уже отображенным на странице с задержкой, что создает эффект «растущих» полос от оси x.

В ловушке mounted мы добавим прослушиватель событий изменения размера окна, которые будут запускать анимацию рисования, и установим размер <svg> относительно нового размера экрана / окна. Вместо того, чтобы запускать это немедленно, мы подождем 300 мс, чтобы быть немного более «уверенными» в том, что пользователь завершил изменение размера своего окна.

Укладка

Стиль полностью зависит от вас, а с синтаксисом стиля Vue с ограниченной областью видимости и низкоуровневым API D3 вы можете настроить его по своему усмотрению. Вы также можете смешивать анимацию CSS с переходами D3 и переходами / анимацией Vue для получения еще более динамических / реактивных эффектов. В этом проекте единственный реальный стиль был сосредоточен на элементе <div>, который определяет размер и размещение <svg> внутри него.

Резюме

Vue позволил нам организовать и структурировать наш компонент чистым и многоразовым способом. Он также создал более удобочитаемую базу кода, особенно для начинающих программистов или любого разработчика, который плохо знаком с API D3 или рабочими процессами обработки данных. Чтобы привыкнуть к стилю Vue + D3, требуется определенная практика, тем более, что большинство онлайн-примеров написаны в традиционном синтаксисе D3, но для терпеливого кодера есть свои преимущества. Динамическая и многократно используемая часть визуализации данных - мощная вещь, и она может иметь решающее значение в мире, управляемом данными.

"Исходный код"