Меню

Функції API D3.js - Підручник із прикладами

d3 js api functions tutorial with examples

Спробуйте Наш Інструмент Для Усунення Проблем

Цей посібник пояснює різні функції API D3.js для додавання таких функцій, як прив'язка даних, приєднання, завантаження та аналіз даних, інтерполяція тощо:

D3.js - це бібліотека візуалізації даних з відкритим вихідним кодом, яка включає різні функції API, що додає цікаві функції, такі як прив'язка даних, об'єднання, завантаження та аналіз зовнішніх даних у форматі CSV, XML та JSON, маніпулювання випадковими числами, інтерполяція та текст форматування та інтернаціоналізація, а також різні функції, такі як анімація, перехід та формування графіків для візуалізації даних.

як зробити підроблені облікові записи електронної пошти

Ви можете звернутися до наших попередніх підручників з цього приводу d3 серія щоб дізнатись більше про його особливості, переваги та передумови.

Функції API у D3.js

Що ви дізнаєтесь:

Прив'язка даних за допомогою D3.js

Для того, щоб створити візуалізацію даних, наприклад діаграми та графіки, потрібно зв’язати дані або об’єднати їх за допомогою елемента DOM.

Дані можуть бути масивом, який є контейнером, що містить числові значення тих самих типів, як показано нижче.

var data = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)

Першим кроком буде створення об'єкта SVG, щоб мати площину або фреймворк для побудови візуалізації даних зовнішніх даних, елемент HTML вибирається за допомогою d3.select () та додається SVG, який діє як полотно, додаючи атрибути такі як ширина та висота полотна.

var svg = d3.select(HTML element like body or div) .attr(width, value from variable for width) .attr(height, value from variable for height)

Наступним кроком є ​​вставка елемента SVG «g», який діє як група, що містить інші елементи SVG.

svg.selectAll ('g')

Далі, прив’яжіть або приєднайте дані до цієї фігури SVG, прикріпленої полотном, за допомогою функції .data (дані).

svg.selectAll ('g').data(data)

Наступним кроком є ​​прив’язка даних до елементів DOM методом .enter () до функції .data (data).

svg.selectAll ('g').data(data).enter()

Далі додайте фігуру SVG, щоб ми могли прикріпити фігуру на полотні.

svg.selectAll ('g') . data(data).enter().append('g')

Приклад прив'язки даних наведено нижче.

var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5) var span = 500, ceil = 500; var scalespan = d3.scaleLinear() .domain((0, d3.max(infoset))) .range((0, 400)); var screen = d3.select('body').append('svg') .attr('width', span) .attr('height', ceil) .append('g').attr('transform', 'translate(5,20)'); var rule = screen.selectAll('rect') .data(infoset).enter() .append('rect') .attr('width', function(d){ return scalespan(d);}) .attr('height', 20) .attr('y', function(d, i){ return i*25; }) .attr('fill', '#b3ccff'); screen.selectAll('text') .data(infoset).enter().append('text') .attr('y', function(d, i){ return i*25; }) .attr('x', function(d){ return scalespan(d);}) .text(function(d) {return d;}) .attr('fill', 'blue').attr('dy','.85em'); Об’єднання, завантаження та аналіз даних у D3.js
Вихідні дані фіксуються у графічному вигляді Координати з прив'язкою даних

Для того, щоб пов'язати дані, що в нашому випадку є щільністю населення на континенті

var infoset = (59,5, 17,2, 9,6, 7,6, 5,5, 0,5)

Екран змінної призначається області малювання, прикріплюючи форму SVG до елемента html, який у нашому випадку є тілом.

Змінна шкала масштабу приймає функцію scaleLinear () з параметрами домену та діапазону для побудови графіку для відображення значень на шкалі у графічному форматі.

.data (infoset) .enter () допоможе зв’язати наш набір даних, призначений змінній Infoset.

Текст додається для того, щоб нанести значення на прямокутники різної довжини, що відповідають їх значенням у наборі даних.

Об’єднання, завантаження та аналіз даних у D3.js

D3.js може завантажувати зовнішні дані або локально у змінні з різних типів файлів і прив'язувати ці дані до елементів DOM.

Різними форматами даних є CSV, JSON, TSV та XML, тоді як d3.csv (), d3.JSON (), d3.tsv () та d3.xml () - це відповідні методи завантаження файлів даних у різні формати із зовнішніх джерел, надіславши запит http на вказану URL-адресу, щоб завантажити файли або дані відповідних форматів, а також виконати функцію зворотного виклику з проаналізованими відповідними об'єктами даних.

локаль за замовчуванням
Зовнішні дані у різних форматах можуть відображатися, як показано вище

Синтаксис для завантаження файлу даних CSV наведений нижче.

d3.csv (url (, row, callback));

# 1) Перша URL-адреса параметра - це URL-адреса або шлях сервера до файлу csv, який є зовнішнім файлом, що завантажується функцією d3.csv. у нашому випадку це так

http: // localhost: 8080 / приклади / film_published.csv

# два) Другий параметр необов’язковий

# 3) Третім параметром є зворотний виклик, який є функцією, яка може передаватися як аргумент іншою функцією, переконуючись, що конкретний код виконується доти, доки інший код не закінчить виконання для форматів JSON, TSV та XML файлу, функція d3.csv є замінено на d3.json, d3.tsv та d3.xml відповідно.

Приклад аналізу зовнішніх даних наведено нижче.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () завантажить файл CSV, як показано вище.

Якщо його відкрити в браузері Google Chrome, натисніть F12, і сторінка оновлення відобразить журнал консолі з коду, який у нашому випадку є console.log (дані), який відображатиме значення з набору даних, із заголовками стовпців, ім'ям фільму та роком. відображатиметься з файлу CSV, який зберігається в сервері.

Маніпулювання випадковими числами в D3.js

d3 - випадкові методи API повертають випадкові числа з різних розподілів ймовірностей, що є математичною функцією, яка обчислює шанси на появу різних результатів.

Ці функції в першу чергу використовують математику. випадкова функція JavaScript, яка виробляє числа, що потрапляють між мінімальним і максимальним числом зазначеного діапазону, що призводить до унікального числа кожного разу, коли Math. виконується випадкова функція.

  • d3.randomUniform - Створювати випадкові числа з рівномірного розподілу. Наприклад d3.randomUniform (1, 2) () - поверне випадкові числа, що включають 1 і менше 2.
  • d3.randomNormal - Створювати випадкові числа з нормального розподілу, Наприклад d3.randomNormal (1, 2) () - поверне ціле число, яке знаходиться між вказаним мінімальним та максимальним значеннями.
  • d3.randomLogNormal - Генеруйте випадкові числа з нормально-часового розподілу, і очікуване значення буде натуральним значенням логарифму для випадкової величини.
  • d3.randomBates - Сформувати випадкові числа з розподілу Бейтса з незалежними змінними.
  • d3.randomIrwinHall - Сформувати випадкові числа з розподілу Ірвіна – Холла.
  • d3.randomExponential - Генерувати випадкові числа з експоненціального розподілу.

Приклад випадкових функцій у d3

Random Functions in d3

Random Functions in d3

document.write(d3.randomUniform(1, 2)() +'

'); document.write(d3.randomNormal(1, 2)()+'

'); document.write(d3.randomLogNormal(1, 2)()+'

'); document.write(d3.randomBates(1, 2)()+'

'); document.write(d3.randomIrwinHall(1, 2)()+'

'); document.write(d3.randomExponential(1, 2)()+'

');

Відображається результат випадкових методів d3

Інтерполяція в D3.js

Методи API, застосовані для інтерполяції між двома випадковими значеннями, залежатимуть від типу кінцевого значення b, загальний синтаксис d3.інтерполяція (a, b). Нижче наведена таблиця, в якій перелічені типи даних кінцевого значення b, а також відповідний метод або функція, які змінюватимуться відповідно до типу даних.

Тип кінцевого значення bВикористана назва методу
Якщо b - загальний масивinterpolateArray ()
Якщо b логічний, нульовий або невизначенийБуде використана постійна b
Якщо b - це числоinterpolateNumber ()
Якщо b - це колір або рядок, що стосуються кольоруinterpolateRgb ()
Якщо b - датаinterpolateDate ()
Якщо b - рядокinterpolateString ()
Якщо b - набраний масив чиселinterpolateNumberArray ()
Якщо b стосується числаinterpolateNumber ()
ІнакшеinterpolateObject ()

Наведений нижче приклад пояснює:

  • d3.interpolateNumber (), функція 10 як початкове значення, а кінцеве значення 20, відображаються значення від початкового значення 10 до кінцевого значення 20 для параметрів інтерполяції від (0,0) до (0,5) до (1,0)
  • d3.interpolateRgb () функція для двох різних назв кольорів, які в результаті отримують відповідні значення rgb (‘r’, ’g’, ’b’), для інтерполяційних параметрів від (0,0) до (0,5) до (1,0)
  • d3.interpolateDate () для двох різних дат у форматі «рррр-мм-дд чч: мм: сс», відображатиме дати між зазначеним вище діапазоном дат, для параметрів інтерполяції від (0,0) до (1,0)

Приклад інтерполяції чисел, кольорів та дат між діапазоном наведено нижче.

Interpolate Numbers, Colors and Dates

var inpolat = d3.interpolateNumber(99,100); document.write(inpolat(0.0) + '

'); document.write(inpolat(0.2)+ '

'); document.write(inpolat(0.5) + '

'); document.write(inpolat(1.0)+ '

'); var inpolcolrs = d3.interpolateRgb('yellow', 'aquamarine'); document.write(inpolcolrs(0.0)+ '

'); document.write(inpolcolrs(0.2)+ '

'); document.write(inpolcolrs(0.5)+ '

'); document.write(inpolcolrs(0.8)+ '

'); document.write(inpolcolrs(1.0)+ '

'); var inpoldates = d3.interpolateDate(new Date('2020-01-01 00:00:00'), new Date('2020-01-15 23:59:59')); document.write(inpoldates(0.0)+ '

'); document.write(inpoldates(0.2)+ '

'); document.write(inpoldates(0.5)+ '

'); document.write(inpoldates(0.8)+ '

'); document.write(inpoldates(1.0)+ '

');

Інтерполяція в D3.js для чисел і кольорів

Форматування тексту та інтернаціоналізація за допомогою D3.js

Форматування та локалізація тексту можуть бути досягнуті в D3.js за допомогою функцій Формат чисел, Формат дати та локаль, як це пояснено нижче на прикладах.

D3 - місцевий ()

d3.locale (визначення), поверне локаль, специфічну для визначення, за замовчуванням визначення локалі є американською англійською мовою для d3.locale (визначення),

який найкращий інструмент для видалення шкідливих програм -

Властивості форматування чисел для визначення локалі перераховані нижче.

  • десятковий: Десяткова крапка зазвичай застосовується в таких валютах, як 25,75 ( Наприклад '.').
  • тисячі: Тисяча - це ідентифікатор або роздільник, який використовується як кома після тисячі значень, таких як 2475 ( Наприклад ',').
  • групування: Групу масиву для кожної групи та розмір можна перевірити, використовуючи Arrayname (5), де 5 - індекс, а розмір масиву - 6 членів.
  • валюта: Префікс та суфікс для рядків валют ( Наприклад ('$', '')).
  • дата, час: Формат дати та часу (% c) матиме дату та час ( Наприклад '% A% b% e% X% Y').
  • дата: Дата (% x) ( Наприклад Рядок формату '% m /% d /% Y') у місяці день та рік.
  • час: Час (% X) ( Наприклад Рядок формату '% H:% M:% S') у годинах, хвилинах та секундах.
  • періоди: Місцеві пам’ятки А.М. та П.М. еквіваленти ( Наприклад ('ДООБІДУ, ПІСЛЯ ОБІДУ')).
  • днів: Дні тижня, починаючи з неділі, в алфавіті.
  • короткі дні: Короткі дні або скорочені назви, такі як НД, ПН тощо, буднів, починаючи з неділі.
  • місяці: Повні назви місяця - жовтень (починаючи з січня).
  • короткімісяці: Короткі місяці або скорочені назви, такі як JAN, FEB, MAR та ін. Місяців (починаючи з січня).

Усі описані вище параметри відображаються у вигляді змінних із відповідними значеннями на наступному зображенні.

Типовою мовою є en_US, російська мова (ru_RU) має константи дати, часу та інтервалу.

D3.формат

d3.format з бібліотеки JavaScript приймає число як вхідний аргумент, синтаксис - d3.format (специфікатор), для перетворення чисел використовується d3.format.

Приклад застосування формату на основі d3 наведено нижче.

Formatting for currency body {padding: 50px; font: 16px Courier;} p { color:blue; font-size: 16px; font-weight: bold;} var body = d3.select('body'); var comafmt = d3.format(','), decimalfmt = d3.format('.1f'), comadecimalfmt = d3.format(',.2f'), suffixfmt = d3.format('s'), suffixfmtDecimal1 = d3.format('.1s'), suffixfmtDecimal2 = d3.format('.2s'), rupiemoneyfmt = function(d) { return 'Rs ' + comadecimalfmt(d); }, intmoneyfmt = function(d) { return '$ ' + comadecimalfmt(d); }, euromoneyfmt= function(d) { return '€ ' + comadecimalfmt(d); }, percentfmt = d3.format(',.2%'); var number = 27500; body.append('p').text('Number used for formatting is : ' + number).style('font-weight', 'bold'); body.append('p').text(function() { return 'Indian Rupee format of above Number : ' + rupiemoneyfmt(number); }); body.append('p').text(function() { return 'International Currency format will be : ' + intmoneyfmt(number); }); body.append('p').text(function() { return 'Euro Currency format will be : ' + euromoneyfmt(number); }); body.append('p').text(function() { return 'Percent format : ' + percentfmt(number); }); body.append('p').text(function() { return 'Suffix for large number : ' + suffixfmt(number); }); body.append('p').text(function() { return 'Round off ceil number: ' + suffixfmtDecimal1(number); }); body.append('p').text(function() { return 'Round off floor number : ' + suffixfmtDecimal2(number); }); body.append('p').text(function() { return 'Comma for large number: ' + comafmt(number); }); body.append('p').text(function() { return 'One decimal format : ' + decimalfmt(number); }); body.append('p').text(function() { return 'Two decimal format : ' + comadecimalfmt(number); });
Форматування застосовується для номера та валюти за допомогою d3.format

Модифікація за допомогою форматів дат за допомогою D3.js

Форматування часу за допомогою бібліотеки D3.js, де d3.timeParse можна застосувати із символами підстановки, тобто регулярним виразом, який допомагає перетворити формат часу введення в потрібний формат.

Приклад формату, пов'язаного з часом та датою, наведено нижче.

body {font-family: Arial, Helvetica, sans-serif; color: blue;} var datetimefmt = d3.timeFormat('%d-%m-%Y %H:%M:%S %p'); document.write(datetimefmt(new Date()) +'

'); var timePortion = d3.timeFormat('%H:%M:%S %p'); document.write(timePortion(new Date()) +'

'); var datePortion = d3.timeFormat('%B %d, %Y'); document.write(datePortion(new Date())+'

'); var datefmt = d3.timeFormat(' %d'); document.write(datefmt(new Date())+'

'); var dayfmt = d3.timeFormat('%A '); document.write(dayfmt(new Date())+'

'); var monfmt = d3.timeFormat('%B'); document.write(monfmt(new Date()) +'

');

Пояснення формату дати та часу

Висновок

У цьому посібнику ми розглянули всі інші основні методи D3.js, такі як прив'язка даних, де дані у вигляді масиву та об'єднання, завантаження, а також аналіз даних мають формат CSV, JSON та XML.

Ми також обговорили маніпуляції із використанням випадкових чисел та методом інтерполяції для візуалізації груп даних на діаграмах або графіках, а також форматування тексту та локалізації за допомогою методів d3.locale для чисел, дати, часу та різних валют мови.

Рекомендована література

^