D3.js (також відомий як D3, скорочено від Data-Driven Documents(укр. Документи, керовані даними)) — це бібліотека JavaScript для створення динамічної та інтерактивної візуалізації даних у веббраузерах. Він використовує широко реалізовані стандарти масштабованої векторної графіки (абревіація SVG), HTML5 та Каскадних Таблиць Стилів (CSS). Він є нащадком фреймворку Protovis.[3] На відміну від багатьох інших бібліотек, D3.js дозволяє чудово контролювати кінцевий візуальний результат.[4] D3.js вперше набув популярності в 2011 році[5], хоч вже і версія 2.0.0 була випущена в серпні 2011 року, себто він отримав визнання не на ранніх стадіях.[6]
D3.js використовується у сотнях тисяч вебсайтів.[7] Його часто застосовують для створення інтерактивної графіки на вебсайтах новин. Також D3.js стає в пригоді при створенні інформаційних 'дошок', де дані стають легші для сприйняття та податливішими для досліджень.
За допомогою цієї бібліотеки також можливе створення інтерактивних карт із використанням даних GIS . Крім того, мобільність формату SVG через його векторну основу дозволяє створену у D3 графіку використовувати у широкометражному друці, на приклад для білбордів або ж журналів, на відміну від растрової.
Контекст
Уже було багато спроб ввести концепт візуалізації даних у веб індустрію. Найбільш помітними прикладами були набори інструментів (методів) Prefuse, Flare та Protovis, які можна вважати прямими попередниками D3.js.
Prefuse — це інструментарій візуалізації, створений ще у 2005 році, який вимагав використання Java, бо саме за допомогою плагіна, написаного цією мовою, у браузері рендерилася графіка, створена цим інструментарієм.
Flare був аналогічним набором інструментів, тільки він був пристосованим до трендів веброзробки 2007 року (рік випуску Flare), тому використовував ActionScript, і для рендерингу потрібен був плагін Flash.
У 2011 році розробку Protovis [Архівовано 23 грудня 2019 у Wayback Machine.] було зупинено, щоб зосередитися на новому проекті, а саме D3.js. Спираючись на досвід роботи з Protovis, Босток разом з Хіром та Огієвецьким, розробили D3.js, щоб створити фреймворк із більшим візуальним потенціалом, який в той же час орієнтується на вебстандарти та пропонує підвищену продуктивність.[9]
Технічні принципи
Вбудована у HTML вебсторінки, бібліотека JavaScript D3.js використовує заздалегідь вбудовані функції JavaScript для вибору елементів, створення SVG-об'єктів, стилізування їх або додавання до них різних переходів, динамічних ефектів чи підказок (при наведенні миші на елемент, на приклад) . Ці об'єкти також можна всіляко змінювати за допомогою CSS. Великі набори даних можна легко вмістити у SVG-об'єкти за допомогою простих функцій D3.js для створення красивих текстових чи графічних таблиць та діаграм. Дані можуть бути в різних форматах, найчастіше — JSON, розділені комами значення (CSV) або geoJSON (для розробки карт різноманітного призначення). При потребі, можна налаштувати функції цієї бібліотеки так, щоб вони читали й інші формати.
Вибірки
Основний принцип дизайну D3.js полягає в тому, щоб програміст спочатку скористався селектором стилів CSS і вибрав певні елементи сторінки із Document Object Model (DOM), а потім використав оператори для того, щоб маніпулювти цими елементами, подібно як це робиться у jQuery .[10] Наприклад, використовуючи D3.js, можна вибрати всі елементи HTML <p>...</p>, а потім змінити їх колір тексту, наприклад, на пурпуровий(lavender):
d3.selectAll("p")// вибрати усі елементи <p>.style("color","lavender")// присвоїти "color" значення "lavender".attr("class","squares")// надати атрибуту "class" значення "squares".attr("x",50);// призначити атрибуту "x" (позиція по-горизонталі) значення 50px
Вибір може ґрунтуватися на тегах (як у наведеному вище прикладі), класі, ідентифікаторі, атрибуті чи місці в ієрархії. Після вибору елементів можна проводити з ними різні операції. До цих операції входить отримання (зчитування) та налаштування (зміна, присвоєння) атрибутів. Таким чином можна відображати різноманітні тексти та присвоювати їм стилі (як у наведеному вище прикладі). Елементи також можна додавати та видаляти. Цей процес зміни, створення та видалення DOM елементів HTML буде виконаний залежно від даних, що ви внесете, що є базовою концепцією D3.js.
Переходи
Оголошуючи перехід, значення атрибутів та стилів можна присвоїти із певною затримкою, таким собі плавним переходом. Код, що ви бачите унизу змусить елемент параграфу HTML <p>...</p> на сторінці поступово змінювати колір тексту на рожевий протягом певного часу:
d3.selectAll("p")// вибрати усі елементи <p>.transition("trans_1")// transition(перехід) з назвою "trans_1".delay(0)// перехід починається за 0ms після тригера(активації).duration(500)// перехід триває 500ms.ease(d3.easeLinear)// характер переходу типу 'ease' є лінійним....style("color","pink");// ... до присвоєння атрибуту "color" значення "pink"
Обв'язування даних
Для більш «просунутого» використання, введені дані можуть керувати створенням елементів. D3.js завантажує заданий набір даних, після чого для кожного його елемента створює SVG-об'єкт із сталими властивостями (форма, кольори, значення) та поведінкою (переходи, події).[11][12][13]
// DatavarcountriesData=[{name:"Ireland",income:53000,life:78,pop:6378,color:"black"},{name:"Norway",income:73000,life:87,pop:5084,color:"blue"},{name:"Tanzania",income:27000,life:50,pop:3407,color:"grey"}];// Створити SVG-контейнерvarsvg=d3.select("#hook").append("svg").attr("width",120).attr("height",120).style("background-color","#D0D0D0");// Створити SVG-елементи із данихsvg.selectAll("circle")// створити віртуальний макет кола.data(countriesData)// прив'язати дані.enter()// для кожного рядка в масиві даних....append("circle")// Поєднати об'єкт коло з рядком даних таким чином:... .attr("id",function(d){returnd.name})// визначити id об'єкта circle згідно з ім'ям країни.attr("cx",function(d){returnd.income/1000})// визначити позицію circle по горизонталі згідно з показником income(дохід) .attr("cy",function(d){returnd.life})// визначити позицію circle по вертикалі згідно з показником life(середній вік).attr("r",function(d){returnd.pop/1000*2})// визначити радіус об'єкта circle згідно з показником pop(популяція країни) .attr("fill",function(d){returnd.color});// визначити колір заливки об'єкта circle згідно з показником color, заданим в масиві countriesData
Також варто зазначити, що SVG графіка була згенерована цим кодом відповідно до заданих даних.
Додавання вузлів за допомогою даних
Після того, як набір даних пов'язаний з документом, використання D3.js зазвичай слідує шаблону, в якому явна функція .enter(), неявне «оновлення» та явна .exit() функція «виходу» викликається для кожного елемента в пов'язаному наборі даних. Будь-які методи, ланцюгові функції після команди .enter() будуть викликані для кожного елемента в наборі даних, який ще не представлений вузлом DOM у вибірці (попередній selectAll()). Аналогічно, неявна функція оновлення викликається на всіх існуючих виділених вузлах, для яких у наборі даних є відповідний елемент, а .exit() викликається на всіх існуючих вибраних вузлах, у яких немає даних у наборі даних для їх прив'язки. Документація D3.js містить кілька прикладів того, як це працює.[14]
Структура API
API-шка D3.js містить кілька сотень функцій, і їх можна згрупувати в такі логічні одиниці:[15]
↑Архівована копія. Архів оригіналу за 11 вересня 2018. Процитовано 29 грудня 2019.{{cite web}}: Обслуговування CS1: Сторінки з текстом «archived copy» як значення параметру title (посилання)
