D3.js
Из Википедии, бесплатной энциклопедии
Перейти к навигации Перейти к поиску

D3.js
Логотип D3.svg
Разработчики)Майк Босток , Джейсон Дэвис, Джеффри Хир , Вадим Огиевецкий и сообщество
Первый выпуск18 февраля 2011 г . ; 10 лет назад ( 2011-02-18 )
Стабильный выпуск
7.0.0 / 7 июня 2021 г . ; 3 месяца назад [1] ( 2021-06-07 )
Репозиторий
Написано вJavaScript
ТипВизуализация данных , библиотека JavaScript
ЛицензияBSD
Веб-сайтd3js .org

D3.js (также известный как D3 , сокращение от Data-Driven Documents ) - это библиотека JavaScript для создания динамических интерактивных визуализаций данных в веб-браузерах . Он использует стандарты масштабируемой векторной графики (SVG), HTML5 и каскадных таблиц стилей (CSS). Это преемник более ранней структуры Protovis. [2] Его разработка была отмечена в 2011 году [3], так как версия 2.0.0 была выпущена в августе 2011 года. [4]

Контекст

Ранее предпринимались различные попытки перенести визуализацию данных в веб-браузеры. Наиболее яркими примерами были наборы инструментов Prefuse, Flare и Protovis, которые можно рассматривать как прямых предшественников D3.js.

Prefuse - это набор инструментов визуализации, созданный в 2005 году, который требует использования Java , а визуализации визуализируются в браузерах с помощью подключаемого модуля Java. Flare был аналогичным набором инструментов 2007 года, который использовал ActionScript и требовал подключаемого модуля Flash для рендеринга.

В 2009 году, основываясь на опыте разработки и использования Prefuse и Flare, Джеффри Хир , Майк Босток и Вадим Огиевецкий из Стэнфордской группы визуализации Стэнфордского университета создали Protovis, библиотеку JavaScript для генерации SVG-графики из данных. Библиотека была известна практикам в области визуализации данных и ученым. [5]

В 2011 году разработка Protovis была остановлена, чтобы сосредоточиться на новом проекте D3.js. Основываясь на опыте работы с Protovis, Bostock вместе с Хиром и Огиевецким разработали D3.js, чтобы обеспечить более выразительную структуру, которая, в то же время, ориентирована на веб-стандарты и обеспечивает улучшенную производительность. [6]

Технические принципы

Библиотека D3.js использует встроенные функции для выбора элементов, создания объектов SVG, их стиля или добавления к ним переходов, динамических эффектов или всплывающих подсказок . Эти объекты также можно стилизовать с помощью CSS. Большие наборы данных можно привязать к объектам SVG с помощью функций D3.js для создания текстовых / графических диаграмм и диаграмм. Данные могут быть в различных форматах, таких как JSON , значения, разделенные запятыми (CSV) или geoJSON , но, при необходимости, функции JavaScript могут быть написаны для чтения других форматов данных.

Выборы

Центральный принцип дизайна D3.js состоит в том, чтобы позволить программисту сначала использовать селектор в стиле CSS для выбора заданного набора узлов объектной модели документа (DOM), а затем использовать операторы для управления ими аналогично jQuery . [7] Например, можно выделить все <p>...</p>элементы HTML , а затем изменить их цвет текста, например, на бледно-лиловый:

 d3 . selectAll ( "p" )  // выбираем все элементы <p>  . style ( "color" ,  "lavender" )  // установить стиль "color" в значение "lavender"  . attr ( "class" ,  "squares" )  // установить для атрибута "class" значение "squares"  . attr ( "х" ,  50 );  // устанавливаем для атрибута "x" (горизонтальное положение) значение 50 пикселей

Выбор может быть основан на теге HTML, классе, идентификаторе, атрибуте или месте в иерархии. После того, как элементы выбраны, к ним можно применять операции. Сюда входит получение и установка атрибутов, отображаемых текстов и стилей (как в приведенном выше примере). Также можно добавлять и удалять элементы. Этот процесс изменения, создания и удаления HTML-элементов может зависеть от данных, что является основной концепцией D3.js.

Переходы

Объявляя переход, значения атрибутов и стилей можно плавно интерполировать в течение определенного времени. Следующий код заставит все <p>...</p>элементы HTML на странице постепенно изменить цвет текста на розовый:

 d3 . selectAll ( "p" )  // выбираем все элементы <p>  . transition ( "trans_1" )  // переход с именем "trans_1"  . delay ( 0 )  // переход начинается через 0 мс после триггера  . duration ( 500 )  // переход на 500 мс  . легкость ( d3 . easeLinear )  // переход ослабления прогрессия линейна ...  . стиль ( «цвет» ,  «розовый» );  // ... цвет: розовый

Связывание данных

Для более продвинутого использования загруженные данные управляют созданием элементов. D3.js загружает заданный набор данных, а затем для каждого из его элементов создает объект SVG со связанными свойствами (форма, цвета, значения) и поведением (переходы, события). [8] [9] [10]

// Данные  var  countryData  =  [  {  name : "Ирландия" ,  доход : 53000 ,  жизнь :  78 ,  население : 6378 ,  цвет :  "черный" },  {  name : "Норвегия" ,  доход : 73000 ,  жизнь :  87 ,  население : 5084 ,  цвет :  "blue"  },  {  name : "Tanzania" ,  доход: 27000 ,  жизнь :  50 ,  поп : 3407 ,  цвет :  "серый"  }  ]; // Создаем контейнер SVG  var  svg  =  d3 . select ( "# крючок" ). добавить ( "SVG" )  . attr ( "ширина" ,  120 )  . attr ( "высота" ,  120 )  . style ( "цвет фона" ,  "# D0D0D0" );// Создание элементов SVG из данных  svg . selectAll ( "circle" )  // создаем шаблон виртуального круга  . data ( countryData )  // привязываем данные  . join ( "circle" )  // объединяет данные с выделенным фрагментом и создает элементы круга для каждой отдельной информации  . attr ( "id" ,  function ( d )  {  return  d . name  })  // установить идентификатор круга в соответствии с названием страны  . attr ( "сх" , function ( d )  {  return  d . доход  /  1000  })  // устанавливаем горизонтальное положение круга в соответствии с доходом  . attr ( "cy" ,  function ( d )  {  return  d . life  })  // установить вертикальное положение круга в соответствии с ожидаемой продолжительностью жизни  . attr ( "r" ,  function ( d )  {  return  d . pop  /  1000  * 2 })  // устанавливаем радиус круга в соответствии с населением страны  . attr ( "заливка" ,  функция ( d )  {  return  d . color  });  // устанавливаем цвет круга в соответствии с цветом страны

Сгенерированная графика SVG разработана в соответствии с предоставленными данными.

Добавление узлов с использованием данных

После того, как набор данных привязан к документу, использование D3.js обычно следует шаблону, в котором явная .enter()функция, неявное «обновление» и явная .exit()функция вызываются для каждого элемента в связанном наборе данных. Любые методы, связанные после .enter()команды, будут вызываться для каждого элемента в наборе данных, который еще не представлен узлом DOM в выборке (предыдущий selectAll()). Аналогичным образом функция неявного обновления вызывается для всех существующих выбранных узлов, для которых есть соответствующий элемент в наборе данных, и .exit()вызывается для всех существующих выбранных узлов, которые не имеют элемента в наборе данных для привязки к ним. В документации D3.js есть несколько примеров того, как это работает. [11]

Структура API

D3.js API содержит несколько сотен функций, и их можно сгруппировать в следующие логические единицы: [12]

  • Выборы
  • Переходы
  • Массивы
  • Математика
  • Цвет
  • Весы
  • SVG
  • Время
  • Макеты
  • География
  • Геометрия
  • Поведение

Математика

  • Генерация псевдослучайных чисел с нормальными , логнормальными , Bates и Ирвином-Холл распределениями.
  • Преобразования в 2D: перенос , поворот , наклон и масштабирование.

Массивы

Операции с массивами D3.js созданы для дополнения существующей поддержки массивов в JavaScript (методы мутатора: sort, reverse, splice, shift и unshift; методы доступа: concat, join, slice, indexOf и lastIndexOf; методы итерации: filter, every, forEach, map, some, reduce и reduceRight). D3.js расширяет эту функциональность за счет:

  • Функции для поиска минимума, максимума, степени, суммы, среднего, медианы и квантиля массива.
  • Функции для упорядочивания, перемешивания, перестановки, слияния и разделения массивов пополам.
  • Функции для вложения массивов.
  • Функции для работы с ассоциативными массивами.
  • Поддержка коллекций карт и наборов.

Геометрия

  • Вычисление выпуклой оболочки множества точек.
  • Вычисление мозаики Вороного набора точек.
  • Поддержка точечной структуры данных квадродерева .
  • Поддержка основных операций над многоугольником.

Цвет

  • Поддержка цветового представления RGB , HSL , HCL и L * a * b * .
  • Осветление, затемнение и интерполяция цветов.

использованная литература

  1. ^ "Релизы · d3 / d3" . github.com . Проверено 11 мая 2021 года .
  2. ^ "Для пользователей Protovis" , Mbostock.github.com , получено 18 августа 2012 г.
  3. ^ Myatt, Гленн Дж .; Джонсон, Уэйн П. (сентябрь 2011 г.), «5.10 Дальнейшее чтение» , Осознание данных III: Практическое руководство по проектированию интерактивных визуализаций данных , Хобокен, Нью-Джерси: John Wiley & Sons , стр. A – 2, ISBN 978-0-470-53649-0, получено 23 января 2013 г.
  4. ^ "Release Notes" , D3.js , получено 22 августа 2012 г.
  5. ^ Академический пример: Савва, Манолис; Конг, Николас; Чхаджта, Арти; Ли, Фейфей; Агравала, Маниш; Хир, Джеффри (2011), «Пересмотр: автоматическая классификация, анализ и переработка изображений диаграмм» , Программное обеспечение и технология пользовательского интерфейса ACM , получено 23 января 2013 г.
  6. ^ Босток, Огиевецким & Хир 2011
  7. ^ Босток, Огиевецким & Хир 2011 , гл. 3
  8. ^ Босток, Майк (5 февраля 2012), мышление с Присоединяется
  9. ^ "Ручка Лопеса Хьюго" . Codepen.io . Проверено 1 августа 2016 года .
  10. ^ "Редактировать скрипку" . JSFiddle.net . Проверено 1 августа 2016 года .
  11. ^ "Три маленьких кружка" . Mbostock.github.io . Проверено 1 августа 2016 года .
  12. ^ d3 (30 июня 2016 г.). «Справочник по API · d3 / d3 Wiki · GitHub» . Github.com . Проверено 1 августа 2016 года .

дальнейшее чтение

Справочная информация о самом D3.js
  • Босток, Майкл; Огиевецкий, Вадим; Хир, Джеффри (октябрь 2011 г.), «D3: Data-Driven Documents» , IEEE Transactions on Visualization and Computer Graphics , IEEE Press , 17 (12): 2301–2309, doi : 10.1109 / TVCG.2011.185 , PMID  22034350
Использование D3.js - начальный уровень
  • Мюррей, Скотт (март 2013 г.), Интерактивная визуализация данных для Интернета, Введение в проектирование с помощью D3 (1-е изд.), Севастополь, Калифорния: O'Reilly Media , ISBN 978-1-4493-3973-9
  • Тиммс, Саймон (сентябрь 2013 г.), Визуализация социальных данных с помощью HTML5 и JavaScript (1-е изд.), Бирмингем: Packt Publishing , ISBN 978-1-7821-6654-2
Использование D3.js - средний уровень
  • Дьюар, Майк (июнь 2012 г.), Стил, Джули; Бланшетт, Меган (ред.), Начало работы с D3 , Создание документов на основе данных (1-е изд.), Севастополь, Калифорния: O'Reilly Media , ISBN 978-1-4493-2879-5
  • Ци Чжу, Ник (октябрь 2013 г.), Визуализация данных с помощью D3.js Cookbook (1-е изд.), Бирмингем: Packt Publishing , ISBN 978-1-7821-6216-2
Другие
  • Ньютон, Томас; Вильярреал, Оскар (2014), Learning D3.js Mapping , Бирмингем: Packt Publishing , стр. 126, ISBN 9781783985609
  • Наварро Кастильо, Пабло (2014), Освоение D3.js , Бирмингем: Packt Publishing , стр. 352, ISBN 9781783286270
  • Теллер, Свизек (2013), Визуализация данных с помощью d3.js , Бирмингем: Packt Publishing , стр. 194, ISBN 9781782160007
  • Виау, Кристоф (2013), Разработка D3.js Edge: Создание многоразовых компонентов и диаграмм D3 , Bleeding Edge Press , стр. 268, ISBN 9781939902023, заархивировано из оригинала 3 сентября 2014 г. , получено 27 августа 2014 г.
  • Микс, Элайджа (2014), D3.js в действии , Manning Publications , стр. 325, ISBN 9781617292118
  • Маклин, Малкольм (2014), D3 Tips and Tricks , Leanpub , p. 580
  • Кинг, Ричи (2014), Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript , Addison-Wesley Data & Analytics Series , p. 288
Видео
  • Гопал, Нихил (октябрь 2014 г.), D3 и CoffeeScript: Введение программиста Python в веб-визуализации , Севастополь, Калифорния: O'Reilly Media
  • Кинг, Ричи (декабрь 2014 г.), D3 Visualization LiveLessons: An Introduction to Data Visualization in JavaScript , Addison-Wesley Professional

связанные проекты

  • В визуализации грамматик Vega и Vega-Lite является декларативной спецификацией визуализации построен на часть D3.js.

внешние ссылки

  • Официальный веб-сайт
  • Галерея D3.js
  • Blocksplorer , поиск блоков по используемым методам
  • Библиотеки "многоразовых диаграмм" D3:
    • C3 https://c3js.org
    • Сюжетно https://plot.ly/javascript
  • bl.ock.org и blockbuilder.org : популярная ранняя система галерей.
  • Observablehq.com  : основная площадка для D3js.
Источник « https://en.wikipedia.org/w/index.php?title=D3.js&oldid=1033685854 »
Contribute a better translation