Войти
 | |
| Разработчик (и) | Майк Босток, Джейсон Дэвис, Джеффри Хир, Вадим Огиевецкий и сообщество |
|---|---|
| Первый выпуск | 18 февраля 2011 г.; 9 лет назад (18.02.2011) |
| Стабильный выпуск | 6.2.0 / 23 сентября 2020 г.; 32 дня назад (2020-09-23) |
| Репозиторий |  |
| Написано на | JavaScript |
| Тип | Данные визуализация, Библиотека JavaScript |
| Лицензия | BSD |
| Веб-сайт | d3js.org |
Портал бесплатного программного обеспечения с открытым исходным кодом D3.js (также известная как D3, сокращение от Data-Driven Documents ) - это библиотека JavaScript для создания динамических, интерактивных визуализаций данных в веб-браузеры. Он использует стандарты масштабируемой векторной графики (SVG), HTML5 и каскадных таблиц стилей (CSS). Это преемник более ранней структуры Protovis. Его разработка была отмечена в 2011 году, так как версия 2.0.0 была выпущена в августе 2011 года.
Ранее предпринимались различные попытки перенести визуализацию данных в веб-браузеры. Наиболее яркими примерами были наборы инструментов Prefuse, Flare и Protovis, которые все можно рассматривать как прямых предшественников D3.js.
Prefuse - это набор инструментов визуализации, созданный в 2005 году, который требовал использования Java, а визуализации визуализировались в браузерах с помощью подключаемого модуля Java. Flare был аналогичным набором инструментов 2007 года, который использовал ActionScript и требовал подключаемого модуля Flash для визуализации.
В 2009 году на основе опыта разработки и использования Prefuse и Flare Джефф Хир, Майк Босток и Вадим Огиевецкий из Стэнфордской группы визуализации Стэнфордского университета создал Protovis, библиотеку JavaScript для генерации графики SVG из данных. Библиотека была известна практикам в области визуализации данных и ученым.
В 2011 году разработка Protovis была остановлена, чтобы сосредоточиться на новом проекте D3.js. Опираясь на опыт работы с Protovis, Босток вместе с Хиром и Огиевецким разработал D3.js, чтобы обеспечить более выразительную структуру, которая, в то же время, ориентирована на веб-стандарты и обеспечивает улучшенную производительность.
Библиотека D3.js использует встроенные функции для выбора элементов, создания объектов SVG, их стиля или добавления к ним переходов, динамических эффектов или всплывающих подсказок. Эти объекты также можно стилизовать с помощью CSS. Большие наборы данных могут быть связаны с объектами SVG с помощью функций D3.js для создания текстовых / графических диаграмм и диаграмм. Данные могут быть в различных форматах, таких как JSON, значения, разделенные запятыми, (CSV) или geoJSON, но, при необходимости, функции JavaScript могут быть записаны в читать другие форматы данных.
Центральный принцип дизайна D3.js - дать возможность программисту сначала использовать селектор в стиле CSS для выбора заданного набора объектной модели документа ( DOM), затем используйте операторы для управления ими аналогично jQuery. Например, можно выбрать все элементы HTML ...
d3.selectAll ("p") // выбрать все элементы.style ("color", "lavender") // установить стиль "color" в значение "lavender".attr ("class "," squares ") // установить атрибут" class "в значение" squares ".attr (" x ", 50); // установить для атрибута "x" (горизонтальное положение) значение 50px
Выбор может быть основан на теге HTML, классе, идентификаторе, атрибуте или месте в иерархии. После выбора элементов к ним можно применять операции. Это включает получение и установку атрибутов, отображаемых текстов и стилей (как в приведенном выше примере). Также можно добавлять и удалять элементы. Этот процесс изменения, создания и удаления HTML-элементов может зависеть от данных, что является основной концепцией D3.js.
Объявляя переход, значения атрибутов и стилей могут плавно интерполироваться в течение определенного времени. Следующий код заставит все элементы HTML ...
d3.selectAll ("p") // выбрать все elements.transition ("trans_1") // переход с именем "trans_1".delay (0) // переход начинается через 0 мс после триггера.duration (500) // переход на 500 мс.ease (d3.easeLinear) // переход прогрессия ослабления линейна....style («цвет», «розовый»); //... в цвет: розовый
Для более продвинутого использования загруженные данные управляют созданием элементов. D3.js загружает заданный набор данных, затем для каждого из его элементов создает объект SVG со связанными свойствами (форма, цвета, значения) и поведением (переходы, события).
// Data var countriesData = [{name : "Ирландия", доход: 53000, жизнь: 78, население: 6378, цвет: "черный"}, {имя: "Норвегия", доход: 73000, жизнь: 87, население: 5084, цвет: "синий"}, {название: "Танзания", доход: 27000, жизнь: 50, население: 3407, цвет: "серый"}]; // Создание контейнера SVG var svg = d3.select ("# hook"). Append ("svg").attr ("width", 120).attr ("height", 120).style ("background-color", "# D0D0D0"); // Создание элементов SVG из данных svg.selectAll ("circle") // создание шаблона виртуального круга.data (countryData) // привязка данных.join ("circle") // объединение данных с выделением и создание элементов круга для каждого отдельные данные.attr ("id", function (d) {return d.name}) // установить идентификатор круга в соответствии с названием страны.attr ("cx", function (d) {return d.income / 1000}) // установить горизонтальное положение круга в соответствии с доходом.attr ("cy", function (d) {return d.life}) // установить вертикальное положение круга в соответствии с ожидаемой продолжительностью жизни.attr ("r", function (d) {return d.pop / 1000 * 2}) // установить радиус круга в соответствии с населением страны.attr ("fill", function (d) {return d.color}); // установить цвет круга в соответствии с цветом страны.Сгенерированная графика SVG разработана в соответствии с предоставленными данными.
После привязки набора данных к документу использование D3.js обычно следует шаблону, в котором явная функция .enter (), неявное «обновление» и явная функция .exit ()вызывается для каждого элемента в связанном наборе данных. Любые методы , связанные после команды .enter (), будут вызываться для каждого элемента в наборе данных, который еще не представлен узлом DOM в выбранном фрагменте (предыдущий selectAll ()). Аналогичным образом, функция неявного обновления вызывается для всех существующих выбранных узлов, для которых есть соответствующий элемент в наборе данных, а .exit ()вызывается для всех существующих выбранных узлов, которые не имеют элемента в набор данных для привязки к ним. Документация D3.js предоставляет несколько примеров того, как это работает.
API D3.js содержит несколько сотен функций, и их можно сгруппировать в следующие логические единицы:
Операции с массивами D3.js созданы для дополнения существующей поддержки массивов в JavaScript (методы мутатора: сортировка, обратное, сращивание, сдвиг и несдвиг; методы доступа: concat, join, slice, indexOf и lastIndexOf; методы итерации: filter, every, forEach, map, some, reduce и reduceRight). D3.js расширяет эту функциональность за счет:
 | На Викискладе есть материалы, связанные с D3.js. |
