Разработка Extensions для QlikView 12. Основы D3.JS — Часть 2

схема алгоритм создания диаграммы d3.js, процесс формирования dom диаграммы из элементов html

Contents

Что такое D3.js?

D3.js (или просто D3) это JavaScript-библиотека для обработки и визуализации данных. Она предоставляет удобные утилиты для обработки и загрузки массивов данных и создания DOM-элементов. Само название D3 расшифровывается как Data-Driven Documents и как бы делает упор на управление данными, хотя ключевой функциональностью библиотеки являются мощные возможности для их визуализации.

qlikview
Библиотека D3.js основана прежде всего на использовании JavaScript, SVG и CSS в противовес другим подобным библиотекам, которые вместо SVG используют элемент canvas и его возможности. Если стандартные механизмы рисования, например, элемент canvas, полагаются на пиксели, то svg использует векторы. Применение SVG позволяет создавать структуры с насыщенной графикой, обладающие анимацией и возможностями взаимодействия.

qlikview
Каковы возможности D3.js? Чтобы понять, что можно делать с помощью библиотеки, достаточно посмотреть ряд примеров, которые приводятся разработчиками на странице https://github.com/mbostock/d3/wiki/Gallery. Это прежде всего, но не только, графики, диаграммы, карты с богатой функциональностью и многое другое.
примеры d3.js

Текучий интерфейс (fluent interface)

D3 реализует подход, называемый fluent interface. При чтении кода он выглядит как цепочка методов. Каждый метод вызывается на объекте, который вернул предыдущий метод. Чтобы код было удобно читать, каждый вызов располагается на отдельной строчке:

Выборка

В D3, как и в других JS-библиотеках, работающих с DOM-элементами, взаимодействие с документом начинается с поиска элементов в документе и создания выборки — обёртки набора элементов. Она даёт доступ к методам библиотеки для модификации выбранных элементов.

Выборка (selection) в D3 создается с помощью методов d3.select() и d3.selectAll(). Для создания выборки D3 использует querySelector/querySelectorAll или Sizzle, если он подключён к странице (например, с jQuery).

Пример:

Из чего состоит D3?

D3.js состоит из:

  • Core — выборки, переходы, данные, локализации, цвета и т.д
  • Scales — масштабирование данных и цветовых кодировок
  • SVG — инструменты для создания масштабируемой векторной графики
  • Time — парсинг временных форматов, вычисление календарных интервалов и т.п
  • Layouts — получение вторичных данных для позиционирования элементов
  • Geography — проектно-специфичные координаты, вычисления над широтой и долготой
  • Geometry — утилиты для 2D-геометрии
  • Behaviors — формы поведения взаимодействия

Некоторые отрывки из теории работы с D3.js:

  • Выборка элементов является одной из первостепенных задач при работе с D3.js, так как чтобы создать графику, надо предварительно выбрать элемент, в котором эта графика будет размещаться;
  • Ключевым аспектом библиотеки D3.js является работа с данными. Для добавления данных в элемент применяется метод data(). В качестве аргумента в этот метод передается массив объектов;
  • С помощью функции filter() можно осуществить фильтрацию данных, что позволит управлять их визуализацией;
  • Для сортировки используется метод sort(), которая использует функцию-компаратор для сравнения данных;
  • Применение SVG позволяет легко рисовать простейшие графические примитивы и затем из них складывать более сложные фигуры. Отличительной особенностью SVG является то, что эта технология позволяет применять стили CSS для настройки визуализации фигур, что дает нам дополнительный контроль над визуализацией;
  • Трансформации являются одним из ключевых аспектов работы с D3.js. Выделяются три типа трансформаций: Масштабирование, Перемещение, Вращение;
  • Для построения линейных графиков нам необходимы координатные оси. И поскольку линейные графики не мыслимы без осей, то в библиотеке d3.js имеется специальный метод d3.svg.axis(), который позволяет строить координатные оси.

Пример Описания методов Selections (Выборки) с сайта https://github.com/d3/d3/wiki/API-Reference-(русскоязычная-версия):

  • d3.select — выборка элемента из текущего документа.
  • d3.selectAll — выборка набора элементов из текущего документа.
  • selection.attr — получить или установить значение аттрибута.
  • selection.classed — добавить или удалить CSS класс.
  • selection.style — получить или установить параметры стилей.
  • selection.property — получить или установить необработанные свойства.
  • selection.text — получить или установить текстовое содержание.
  • selection.html — получить или установить HTML-содержание.
  • selection.append — создать или добавить новый элемент.
  • selection.insert — создать или вставить новый элемент перед существующим.
  • selection.remove — удалить элемент из документа.
  • selection.data — получить или установить данные для группы элементов при вычислениях реляционного соединения.
  • selection.enter — получить заполнители для недостающих элементов.
  • selection.exit — получить элементы, которые больше не нужны. (прим. элементы, которые не были изменены. Читать про использование data, enter и exit.)
  • selection.datum — получить или установить данные для отдельных элементов, не вычисляя соединение.
  • selection.filter — фильтровать выбор на основе данных.
  • selection.sort — сортировать элементы в документе на основе данных.
  • selection.order — reorders elements in the document to match the selection.
  • selection.on — добавление или удаление обработчиков событий (event listeners).
  • selection.transition — Начало перехода выбранных элементов.
  • selection.interrupt — immediately interrupt the current transition, if any.
  • selection.each — вызывает указанную функцию для каждого элемента из выборки.
  • selection.call — вызвать функцию, проходящую в текущем выделении.
  • selection.empty — возвращает true, если выборка пуста.
  • selection.node — возвращает первый элемент из выборки.
  • selection.size — возвращает количество элементов в выборке.
  • selection.select — subselect a descendant element for each selected element.
  • selection.selectAll — subselect multiple descendants for each selected element.
  • d3.selection — augment the selection prototype, or test instance types.
  • d3.event — access the current user event for interaction.
  • d3.mouse — получает позицию мыши относительно заданного контейнера.
  • d3.touch — получает сенсорное положение относительно указанного контейнера.
  • d3.touches — получает сенсорные положения по относительно указанных контейнеров.

Всю другую документацию читайте на официальном сайте D3.js по ссылке https://github.com/d3/d3/wiki/API-Reference-(русскоязычная-версия):

qlikview

Кратко о некоторых основах JavaScript

Для того, чтобы работать с D3.js нужно иметь базовые знания о javascript и немного о jQuery. В этой части статьи я приведу выжимку из теории с сайта https://learn.javascript.ru. Если вдруг Вы захотите прочитать о javascript, то смело заходите на этот сайт!

Создание переменных/массива данных js

Переменная

Массив

Массив из нескольких значений

Методы pop/push, shift/unshift для манипуляции с данными массива

Конец массива

pop
Удаляет последний элемент из массива и возвращает его:

push
Добавляет элемент в конец массива:

Вызов fruits.push(…) равнозначен fruits[fruits.length] = ….

Начало массива

shift
Удаляет из массива первый элемент и возвращает его:

unshift
Добавляет элемент в начало массива:

Методы push и unshift могут добавлять сразу по несколько элементов:

Циклы в js

Цикл while

Цикл do…while

Цикл for

Функции в js

Объявление

Параметры

Возврат значения (return)

Копирование функции в переменную

Объявление Function Expression

Методы объектов. Ключевое слово «this»

Методы у объектов

При объявлении объекта можно указать свойство-функцию, например:

Свойства-функции называют «методами» объектов. Их можно добавлять и удалять в любой момент, в том числе и явным присваиванием:

Доступ к объекту через this

Любая функция может иметь в себе this. Совершенно неважно, объявлена ли она в объекте или отдельно от него.
Значение this называется контекстом вызова и будет определено в момент вызова функции.
Например, такая функция, объявленная без объекта, вполне допустима:

Как работать с JSON данными

Основные методы для работы с JSON в JavaScript – это:

  • JSON.parse – читает объекты из строки в формате JSON.
  • JSON.stringify – превращает объекты в строку в формате JSON, используется, когда нужно из JavaScript передать данные.

Пример:

Еще пример:

Условные операторы: if, «?»

Оператор if

Оператор вопросительный знак «?»

Объекты как ассоциативные массивы

Ассоциативный массив – структура данных, в которой можно хранить любые данные в формате ключ-значение.

Создание объектов

Обращение к свойствам

Для обращения к свойствам используется запись «через точку», вида объект.свойство, например:

В качестве значения можно тут же указать и другой объект:

Знак $ в jQuery

Если говорить простыми словами, венгерская нотация1 в jQuery — это когда в начале переменной стоит символ доллара, и вам легко сразу понять, что эта переменная содержит jQuery-объект. Если у вас есть код как на js так и на jquery, принято переменным добавлять

Пример создания объекта div на jQuery

$ вместо jQuery (Normal и Safe режимы)

jQuery() — Возвращает коллекцию согласованных элементов, найденных в DOM на основе переданных аргументов или созданных путем передачи строки HTML. Если помимо библиотеки jQuery не используются другие библиотеки, в которых символ $ используется для других целей, то можно использовать следующий синтаксис:

Пример:

qlikview

И напоследок, презентация по JavaScript:

Загрузчик Загрузка...
Логотип EAD Слишком долго?

Перезагрузка Перезагрузить документ
| Открыть Открыть в новой вкладке

Скачать [1.56 MB]

D3 = ‘DATA-DRIVEN DOCUMENTS’

DATA-DRIVEN DOCUMENTS — это:

  • Связывание данных с элементами DOM
  • Создание / удаление / преобразование элементов DOM
  • <p>, <td>, <rect>, <line>, <path> и т.д.

Какие плюсы у использования DOM?

  • Дизайн/форматирование (CSS)
  • Взаимодействие/Интерактивность (события)
  • Гибкость (все, что можно представить с помощью HTML, CSS и SVG, можно сделать с помощью D3)
  • Отладка (Chrome Developer Tools, Firebug)
  • Знакомство (большинство веб-разработчиков знакомы с DOM)

Причины, по которым не следует выбирать D3

  • Learning curve (изначальная сложность изучения)
  • Требует SVG для нетривиальных графических визуализаций

Ядро — SELECTIONS (Выборки)

Похож на jQuery, но не такой же

Ядро — SELECTIONS (Выборки) — ПРИВЯЗКА ДАННЫХ

Ядро — ДРУГОЕ

Масштабирование

Scales — это функции, которые мэпят данные из входного домена в выходной диапазон

SVG

Добавляем SVG элементы, подобно любому другому элементу

…или использовать генератор SVG для генерации данных пути

SVG-path

SVG-path — более сложный вариант линии. С его помощью можно нарисовать line, polyline, polygon, circle и rect.
В отличие от polygon, фигура не замыкается сама по себе, но это можно сделать с помощью дополнительного параметра.
Подробнее о SVG-path >>>

TIME

LAYOUTS

Модуль Layouts заключает в себе функционал визуального отображения связанных с данными элементов друг относительно друга. Layouts получают ряд входных данных, применят к ним алгоритм или эвристику, и выводят результат в виде графического представления данных.

Layouts мало чем отличаются от d3.svg path generators в том, что они помогают преобразовывать данные для их визуального представления. Однако Layouts, как правило, работают с набором данных в целом, а не по отдельности. Кроме того, результаты работы Layout не ограничены одним SVG. Некоторые Layouts динамичны во времени: например, Force Layout, где после исполнения метода .start() экземпляра d3.layout.force() можно отслеживать события ‘tick’ обновления лейаута.

В D3 встроены более десятка Layouts. Их экземплярами зачастую являются функции (хотя не обязательно), которые могут быть сконфигурированы и затем применены к набору данных. В иных случаях, для ввода данных и представления результата используются отдельные методы или обработчики событий. Для использования нужно смотреть документацию каждого конкретного Layout.

Методы (или классы) Layouts:

  • Bundle
  • Chord
  • Cluster
  • Force
  • Histogram
  • Pack
  • Partition
  • Pie
  • Stack
  • Tree
  • Treemap

GEOGRAPHY

Географические данные карт (GeoJSON) для SVG path data

qlikview

Порядок работы с D3.js

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

Поэтапный разбор формирования простой диаграммы Bar Chart на D3.JS


Данный пример можно посмотреть по ссылке: Simple Bar Chart >>>.

index.html

style.css

script.js

Расшифруем работу script.js

Теперь рассмотрим работу этого скрипта с картинками по шагам:
После выполнения кода

в теле документа html ничего не меняется:
Разработка Extensions для QlikView 12. Основы D3.JS — Часть 2

Далее выполняется метод append():

В документе появились элементы <p> </p>:
Разработка Extensions для QlikView 12. Основы D3.JS — Часть 2

Дальше задается ширина каждому элементу (тегу) <p>, которая вычисляется по формуле 100% разделить на количество элементов + 1:

Разработка Extensions для QlikView 12. Основы D3.JS — Часть 2

И в последнюю очередь задается высота элемента <p>:

Разработка Extensions для QlikView 12. Основы D3.JS — Часть 2

qlikview

Примерная схема работы с D3.JS (простая работа с d3 javascript)

схема алгоритм создания диаграммы d3.js, процесс формирования dom диаграммы из элементов html

qlikview

Скачать разобранный пример D3.js Bar Chart в статье

d3_ivan_shamaev_ru.zip

qlikview

Видео лекции по D3 для разработки Визуализации

Наткнулся на две большие статьи с лекциями по D3.js. Надеюсь, что Вам пригодится материал. А ребятам хочу сказать огромное спасибо за их лекции и их труд!!! 🙂

Загрузчик Загрузка...
Логотип EAD Слишком долго?

Перезагрузка Перезагрузить документ
| Открыть Открыть в новой вкладке

Скачать [475.11 KB]

https://jsfiddle.net/ — онлайн инструмент для прототипирования

Лекция 1. Визуальное кодирование

Лекция 2. Микро– и макроуровень

Лекция 3. Интерактивность

qlikview

Лекция 4. Основы SVG и D3

Лекция 5. График на D3

Лекция 6. Хитмап (теплокарта) на D3

qlikview

Источники, использованные при написании статьи (рекомендую почитать)

qlikview

0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x