Меню

D3.js API функции - Урок с примери

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 (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) Третият параметър е Callback, който е функция, която може да бъде предадена като аргумент от друга функция, като се увери, че конкретен код се изпълнява, докато друг код вече не е завършил изпълнението за форматите 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 (data), който ще покаже стойности от набора от данни, с глави на колони, име_на филм и година ще да се показва от CSV файла, съхраняван на мястото на сървъра.

Манипулиране на случайни числа в D3.js

d3 - методите на произволни API връщат случайни числа от различни вероятностни разпределения, което е математическа функция, която изчислява шансовете за възникване на различни възможни резултати.

Тези функции използват предимно математиката. произволна функция на JavaScript, която произвежда числа, които попадат между минималния и максималния брой на посочения диапазон, води до уникален номер всеки път, когато Math. случайната функция се изпълнява.

  • d3.randomUniform - Генерирайте произволни числа от еднакво разпределение. E.g. d3.randomUniform (1, 2) () - ще върне произволни числа, включващи 1 и по-малко от 2.
  • d3.randomNormal - Генериране на произволни числа от нормално разпределение, E.g. 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 ( E.g. '.').
  • хиляди: Хиляда е идентификатор или разделител, който се използва като запетая след хиляда стойности като 2,475 ( E.g. ',').
  • групиране: Група масив за всяка група и размерът могат да бъдат проверени с помощта на Arrayname (5), където 5 е индекс, а размерът на масива е 6 членове.
  • валута: Префикс и суфикс за валутните низове ( E.g. ('$', '')).
  • Време за среща: Форматът за дата и час (% c) ще има дата и час ( E.g. '% A% b% e% X% Y').
  • дата: Датата (% x) ( E.g. „% M /% d /% Y“) низ във формат Месец Ден и Година.
  • време: Времето (% X) ( E.g. '% H:% M:% S') низ във формат Часове минути и секунди.
  • периоди: Локалният A.M. и П.М. еквиваленти ( E.g. („AM“, „PM“)).
  • дни: Дни от седмицата, започващи с неделя, по азбука.
  • къси дни: Кратки дни или съкратени имена като СЛЪНЦЕ, ПН и т.н. на делничните дни, започвайки с неделя.
  • месеци: Пълните имена на месеца като октомври (започвайки с януари).
  • shortMonths: Кратки месеци или съкратени имена като 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 за числа, дата, час и различни валути на локал.

Препоръчително четене

^