Если вы пытаетесь внедрить визуализацию данных в свое приложение, вам подойдет D3. D3 дает вам возможность создавать разнообразные графики с использованием HTML, CSS и SVG.
Набор данных
Прежде всего, нам понадобится набор данных. В этом примере мы будем использовать JSON, но можно использовать и другие альтернативы.
Позже мы увидим, что массив объектов будет легко управлять с помощью сопоставления.
Подготовка
Нам потребуется добавить скрипт на нашу HTML-страницу, чтобы получить доступ ко всем функциям D3 (строка 5)
Как только мы установим нашу библиотеку D3, мы начнем с создания основы нашего графа. Мы начнем с установки ширины, высоты и полей, а также контейнера с именем SVG для хранения нашей гистограммы.
Как это работает, вы выбираете определенный тег, который мы хотим разместить на нашем графике, в нашем случае это div с идентификатором «SelectedDivForGraph», который у нас был в нашем HTML-файле. Как только мы выберем это, мы создадим контейнер SVG и добавим к нему пару атрибутов.
Ограничения
Теперь, когда мы все настроили, мы собираемся установить пределы для каждой оси.
Мы устанавливаем ограничения, используя домен, который зависит от нашего набора данных. Для нашей оси x мы устанавливаем количество элементов, которые у нас есть в наших данных. Для нашей оси Y мы устанавливаем его на 25 % (строка 45) больше, чем наше наибольшее количество голосов(строки 40–44).
Создание
Теперь, когда все параметры нашего графика настроены, мы собираемся перейти к сути графика, создав сами столбцы и ось.
Для самих столбцов мы будем добавлять к ним цвет, а также получать доступ к данным для управления прямоугольниками, используемыми для создания наших столбцов. Это используется с парой атрибутов x и y, а также с высотой и шириной, чтобы указать, сколько и насколько большими должны быть столбцы. Мы также создаем функции для оси, чтобы они могли использовать ограничения, которые мы создали ранее.
После того, как мы все это сделали, нам просто нужно добавить еще пару строк, чтобы нарисовать графики в нашем приложении. Сначала мы создаем обе оси, а затем сами стержни. Как только все это будет сделано, у нас должна быть функциональная гистограмма, готовая к использованию.
Заключение
Надеюсь, что это простое руководство станет хорошим началом для знакомства с технологиями визуализации данных с использованием D3. Это лишь один из многих графиков, которые можно построить. Возможности безграничны даже для гистограммы, так что начните рисовать и найдите лучшие способы реализации визуализации данных в ваших приложениях.