Введение
В связи с растущим спросом на настраиваемую визуализацию высокоинкапсулированные среды визуализации, такие как Highcharts и echarts, больше не могут удовлетворять различные потребности пользователей в визуализации с жесткими настройками.В настоящее время неограниченные возможности настройки D3 выделяются.
Если вы хотите завершить визуализацию с помощью D3, помимо изучения API самого D3, вам необходимо изучить концепции и стандарты веб-стандартов HTML, SVG, CSS, Javascript и визуализации данных. Это, несомненно, обеспечивает высокий порог обучения, но это того стоит, потому что после освоения D3 мы можем достичь практически любых потребностей в 2d-визуализации.
Эта статья поможет новичкам изучить и понять идеи рисования D3, анализируя основные модули D3 и выполняя конкретные практические задания.
2. Что такое Д3
Полное название D3 — Data-Driven Documents, представляющее собой библиотеку JavaScript для управления документами на основе данных.Основой D3 является использование инструкций по рисованию для преобразования данных, создания новых рисуемых данных на основе исходных данных и создания SVG. и создавать элементы визуализации данных (например, оси) в DOM с помощью данных и методов.
По сравнению с готовыми фреймворками визуализации, такими как Echats, D3 находится ближе к нижнему слою.Он может напрямую управлять нативными элементами SVG и не предоставляет готовых диаграмм визуализации напрямую.Все диаграммы нужны нам в его библиотеке. , Он создается путем выбора соответствующего метода здесь, что значительно улучшает его визуальную возможность настройки. И D3 не вводит новые графические элементы, он следует веб-стандартам (HTML, CSS, SVG и Canvas) для отображения данных, поэтому он может работать независимо в современных браузерах, не полагаясь на другие фреймворки.
3. Основной модуль D3
После версии V4 API D3 теперь был разделен на модули, которые мы можем загрузить на спрос в соответствии с нашими собственными потребностями визуализации. Согласно общему значению, модули API D3 могут быть разделены на следующие категории:Манипулирование DOM, обработка данных, преобразование анализа данных, географический путь, поведение и т. д..
Здесь мы в основном анализируем модули D3-selection и D3-scale:
3.1 D3-selection
D3-selection(набор выбора) — это основной модуль D3js, в основном используемый для выбора элементов, установки свойств, привязки данных, привязки событий и других операций.
**Выбрать элемент:**D3-выбор предоставляет два метода для получения целевого элемента, d3.select(): возвращает первый узел целевого элемента, d3.selectAll(): возвращает набор целевых элементов, на первый взгляд Аналогичен querySelector и querySelectorAll собственного API, но d3.select возвращает объект выбора, а querySelector возвращает массив NodeList. По информации, напечатанной на консоли, видно, что в выбранных группах хранится набор всех выбранных элементов, а в родительских — родительские узлы всех выбранных элементов.
**Задайте свойства или привяжите события:** Нам не нужно заботиться о том, как структурированы группы. При вызове selection.attr или selection.style будут вызваны все подэлементы всех групп в selection.Единственный эффект существования группы: когда мы передаем параметр, это функция, такая как selection.attr('attrName ' , function(data, i)) или selection.on('click', function(data, i)), в переданной функции (data, i) второй параметр i вместо этого является индексом элемента в группе индекса во всей выборке.
** Привязка данных: ** На самом деле, она фактически присваивается атрибуту __data__ выбранного элемента DOM, что обеспечивает три способа привязки данных:
(1) Вызов selection.datum для каждого отдельного элемента DOM: d3.select('body').datum(20) эквивалентно document.body.__data__ = 20
(2) Данные наследуются от родительского узла, например: добавить, вставить, выбрать, дочерний узел будет активно наследовать данные родительского узла:
(3) Вызов метода selection.data() для поддержки передачи данных с базовыми типами данных, а также поддержки передачи функции (parentNode, groupIndex) для сопоставления в соответствии с индексом узла и данными.Введен метод data() в d3.Важные идеи объединения:
Привязка данных к элементам DOM, в D3, находит соответствующую связь путем сравнения ключевых значений данных и DOM. Если мы не устанавливаем значение ключа отдельно, то значение по умолчанию устанавливается в соответствии с индексом индекса данных, но при изменении порядка данных значение ключа индекса по умолчанию становится ненадежным, тогда мы можем использовать selection.data(data, keyFunction) , второй параметр keyFunction, возвращает соответствующее значение ключа в соответствии с текущими данными. Как видно из следующей легенды, независимо от того, существует ли одна или несколько групп (каждая группа независима), при условии, что мы обеспечиваем уникальность значения ключа в любой группе, после изменения данных оно будет отражено в соответствующем Элемент DOM (процесс обновления):
3.2 Присоединиться к идее
Вышеупомянутое является привязкой данных, когда количество данных данных и элементов DOM одинаково.Если количество данных данных и элементов DOM не то же самое, давайте посмотрим, как D3 выполняет привязку данных: теперь мы, наконец, можем представить основная идея присоединения модуля D3-selecion.Эта идея заключается в том, что «вы не должны указывать D3, как создавать элементы, но сообщать D3, что коллекция выбора, полученная с помощью .selectAll(), должна быть привязана к .data(data) Как сопоставить данные один за другим».
Как видно из рисунка выше, при выполнении привязки данных d3.data(data) будет сгенерирован выборочный набор из трех состояний:
Update:Коллекция элементов DOM, привязанных к данным.
**Ввод: **данные данных не находят соответствующий набор элементов DOM (то есть отсутствующий элемент DOM)
Exit:Набор элементов DOM, не связанных с данными (избыточные элементы DOM).
Понимание этого с точки зрения соединения означает, что все, что нам нужно сделать, это объявить связь между набором DOM и набором данных и описать эту связь, обработав три разных набора состояний: вход, обновление и выход. Этот метод может значительно упростить наши операции с элементами DOM, и нам не нужно использовать циклы if и for, чтобы делать сложные логические суждения, чтобы получить набор элементов, который нам нужно получить. А при обработке динамических данных вы можете легко отображать данные в реальном времени и добавлять эффекты плавного динамического взаимодействия, обрабатывая эти три состояния.
3. 3 D3-scale
D3-scale(Масштабная линейка) Доступно несколько различных типов масштабных линеек. Часто используется с осевым модулем D3.
Шкала D3 предоставляет множество непрерывных и прерывистых шкал, которые можно разделить на три категории:
Непрерывный ввод (домен) и непрерывный вывод (диапазон)
Непрерывный ввод (домен) и дискретный вывод (диапазон)
Дискретный ввод (домен) и дискретный вывод (диапазон)
Некоторые часто используемые шкалы:
(1) d3-scaleЛинейная линейная шкала (непрерывный ввод и непрерывный вывод)
Можно видеть, что вызов d3.scaleLinear() может генерировать линейную шкалу, domain() — входной домен, а range() — выходной домен, что эквивалентно сопоставлению набора данных в домене с набором данных в диапазоне. .
Пример использования:
Картографические отношения:
(2) шкала времени d3-scaleTime (непрерывный ввод и непрерывный вывод)
Шкала времени аналогична линейной шкале, за исключением того, что поле ввода становится осью времени. Обычно мы используем шкалу в процессе положительного порядка, но D3 также предоставляет методы invert() и invertExtent(), мы можем получить значение соответствующего поля ввода через конкретное значение в поле вывода.
Пример использования:
(3) d3.scaleQuantize квантованная шкала (непрерывный ввод и дискретный вывод)
Квантовая шкала предназначена для разделения непрерывной входной области на однородные сегменты в соответствии с выходной областью, поэтому ее выходная область является дискретной.
Пример использования:
Картографические отношения:
(4) d3.scaleThreshold пороговая шкала (непрерывный ввод и дискретный вывод)
Шкала порога может указывать порог сегментации для набора непрерывных данных.Шкала порога по умолчанию — это домен: [0,5] и диапазон по умолчанию: [0, 1] , поэтому d3.scaleThreshold() по умолчанию эквивалентен Math. круглая функция. Если входное поле пороговой шкалы равно N, выходное поле должно быть N + 1, иначе шкала может вернуть значение undefined для некоторых значений или избыточное значение выходного поля будет проигнорировано.
Пример использования:
Существует три отношения отображения:
А. Когда данные домена и диапазона равны N : N+1
Б. Когда данные домена и диапазона N : N + больше 1
C. Когда данные домена и диапазона N + больше 0 : N
(5) d3.scaleOrdinal порядковая шкала (дискретный ввод и дискретный вывод)
В отличие от непрерывных шкал, таких как scaleLinear, порядковые шкалы имеют дискретные выходные и входные домены.
Пример использования:
Существует три отношения отображения:
А. Когда данные домена и диапазона взаимно однозначно соответствуют
б. Когда домен меньше диапазона данных
C. Когда домен больше, чем диапазон данных
В-четвертых, реальный бой
Благодаря вышеизложенному обучению у вас должно быть определенное понимание того, как d3 управляет DOM и отображением данных оси координат в соответствующее визуальное представление Давайте фактически используем эти два модуля для реализации нашей общей визуальной диаграммы: гистограммы.
(1) Сначала добавьте элемент SVG.
(2) В соответствии с модулем d3.scale и модулем d3.axis, которые мы упоминали выше для рисования оси координат, d3.scaleBand() называется порядковой сегментированной шкалой, аналогичной порядковой шкале d3.scaleOrdinal(), о которой мы говорили: но он поддерживает непрерывные значения Тип выходного домена, дискретный входной домен может разделить непрерывный диапазон на однородные сегменты. Вот еще одна деталь.При отрисовке сетки мы не добавляли для этого дополнительные линейные элементы, а через модуль оси координат d3.axisaxis.ticks()Метод устанавливает масштаб оси координат и устанавливает длину деления через tickSIze(), чтобы имитировать линию сетки, равную ширине диаграммы, а также может передать tickFormat() для форматирования значения масштаба оси Y. .
(3) После того, как ось координат нарисована, мы рисуем соответствующий элемент прямоугольника (прямоугольника) через привязку данных.
(4) В настоящее время гистограмма в основном нарисована, и мы улучшим отображение содержимого, добавив метки, заголовки и другую оперативную информацию.
(5) Наконец, мы прослушиваем события, привязываясь к столбцу, чтобы получить информационный плавающий слой интерактивных всплывающих подсказок.
V. Резюме
Благодаря изучению таких модулей, как d3.selection, d3.scale и d3.axis, мы уже можем рисовать общие гистограммы и другие диаграммы, а также можем рисовать более сложные эффекты визуализации с помощью других модулей, предоставляемых d3, например, с помощью d3 — иерархия (модуль уровня) реализует визуализацию иерархических древовидных диаграмм, d3-geo (географическая проекция) реализует визуализацию картографических данных и т. д. Содержимое, описанное в этой статье, является лишь верхушкой айсберга библиотеки D3. Поэтому, когда мы осваиваем D3, наша визуализация ограничивается не технологиями, а воображением.
Автор: Рэй