D3.js - D3.js - Wikipedia

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

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

Контекст

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

Предварительный предохранитель был создан в 2005 году набор инструментов для визуализации, который требовал использования Ява, а визуализации выполнялись в браузерах с помощью подключаемого модуля 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] Например, можно выбрать весь HTML <p>...</p> элементы, а затем изменить их цвет текста, например к лаванде:

 d3.выбрать все("п")                 // выбираем все элементы 
   .стиль("цвет", "лаванда")     // устанавливаем стиль "цвет" в значение "лаванда"   .attr("учебный класс", "квадраты")       // устанавливаем атрибут "class" в значение "squares"   .attr("Икс", 50);                 // устанавливаем атрибут "x" (положение по горизонтали) на значение 50 пикселей

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

Переходы

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

 d3.выбрать все("п")             // выбираем все элементы 
   .переход("транс_1")      // переход с именем "trans_1"     .задерживать(0)                 // переход начинается через 0 мс после триггера     .продолжительность(500)            // переход на 500 мс     .простота(d3.легкостьЛинейный)           // прогрессия замедления перехода линейна ...   .стиль("цвет", "розовый");    // ... цвет: розовый

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

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

// Данные  вар CountryData = [     { имя:"Ирландия",  доход:53000, жизнь: 78, поп:6378, цвет: "чернить"},     { имя:"Норвегия",   доход:73000, жизнь: 87, поп:5084, цвет: "синий" },     { имя:"Танзания", доход:27000, жизнь: 50, поп:3407, цвет: "серый" }  ];// Создаем контейнер SVG  вар svg = d3.Выбрать("#крюк").добавить("svg")        .attr("ширина", 120)        .attr("высота", 120)        .стиль("фоновый цвет", "# D0D0D0");// Создание элементов SVG из данных     svg.выбрать все("круг")                  // создаем шаблон виртуального круга      .данные(CountryData)                   // связываем данные       .присоединиться("круг")                                 // объединяет данные с выбранным и создает элементы круга для каждого отдельного данных        .attr("я бы", функция(d) { возвращаться d.имя })            // устанавливаем идентификатор круга в соответствии с названием страны        .attr("сх", функция(d) { возвращаться d.доход / 1000  })  // устанавливаем горизонтальное положение круга в соответствии с доходом         .attr("cy", функция(d) { возвращаться d.жизнь })            // устанавливаем вертикальное положение круга в соответствии с продолжительностью жизни         .attr("р",  функция(d) { возвращаться d.поп / 1000 *2 })   // устанавливаем радиус круга в соответствии с населением страны         .attr("наполнять", функция(d) { возвращаться d.цвет });        // устанавливаем цвет круга в соответствии с цветом страны

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

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

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

Структура API

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

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

Математика

Массивы

Операции с массивами 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, и Л * а * б * цветовое представление.
  • Осветление, затемнение и интерполяция цветов.

Рекомендации

  1. ^ "Релизы d3". Github.com.
  2. ^ «Для пользователей Protovis», Mbostock.github.com, получено 18 августа, 2012
  3. ^ Myatt, Glenn J .; Джонсон, Уэйн П. (сентябрь 2011 г.), «5.10 Дальнейшее чтение», Осмысление данных III: Практическое руководство по проектированию интерактивных визуализаций данных, Хобокен, Нью-Джерси: Джон Уайли и сыновья, п. А – 2, ISBN  978-0-470-53649-0, получено 23 января, 2013
  4. ^ «Примечания к выпуску», D3.js, получено 22 августа, 2012
  5. ^ Академический пример: Савва, Манолис; Конг, Николай; Чхаджта, Арти; Ли, Фейфей; Агравала, Маниш; Хир, Джеффри (2011), "ReVision: автоматическая классификация, анализ и переработка графических изображений", Программное обеспечение и технологии пользовательского интерфейса ACM, получено 23 января, 2013
  6. ^ Босток, Огиевецкий и Хир 2011
  7. ^ Босток, Огиевецкий и Хир 2011, гл. 3
  8. ^ Босток, Майк (5 февраля 2012 г.), Мышление с объединениями
  9. ^ "Ручка Лопеса Хьюго". Codepen.io. Архивировано из оригинал 22 марта 2016 г.. Получено 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
Использование D3.js - начальный уровень
Использование D3.js - средний уровень
Другие
Ролики

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

внешняя ссылка