d3 js api functions tutorial with examples
Овај водич објашњава разне функције АПИ-ја Д3.јс за додавање функција као што су везивање података, спајање, учитавање и рашчлањивање података, интерполација итд.:
Д3.јс је ЈаваСцрипт библиотека за визуализацију података отвореног кода која се састоји од различитих АПИ функција које додају узбудљиве функције као што су везивање података, спајање, учитавање и рашчлањивање спољних података у ЦСВ, КСМЛ и ЈСОН формату, манипулација случајним бројевима, интерполација и текст форматирање и интернационализација, заједно са разним функцијама као што су анимација, прелазак и формирање графикона за визуелизацију података.
пхп интервју питање и одговор за искуство
О томе се можете позвати на наше раније водиче д3 серија да бисте сазнали више о његовим карактеристикама, предностима и предусловима.
Шта ћете научити:
Везивање података са Д3.јс
Да би се створила визуелизација података као што су графикони и графикони, потребно је повезати податке или их спојити са ДОМ елементом.
Подаци могу бити низ који је контејнер који садржи нумеричке вредности истих типова, као што је приказано у наставку.
var data = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)Први корак биће стварање СВГ објекта, да би се имала раван или оквир за изградњу визуализације података спољних података, ХТМЛ елемент се бира помоћу д3.селецт () и додаје СВГ који делује као платно додавањем атрибута као што су ширина и висина платна.
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.selectAll ('g')Даље, повежите податке или их спојите у овај СВГ облик причвршћен платном, користећи функцију .дата (подаци).
svg.selectAll ('g').data(data)Следећи корак је везивање података за ДОМ елементе помоћу методе .ентер () за функцију .дата (дата).
svg.selectAll ('g').data(data).enter()Даље, додајте СВГ облик тако да можемо да прикачимо облик на платно.
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'); 
Да би се повезали подаци, што је у нашем случају континентална густина насељености
вар инфосет = (59,5, 17,2, 9,6, 7,6, 5,5, 0,5)
Екран променљиве додељује се подручју цртања причвршћивањем СВГ облика на хтмл елемент, који је у нашем случају тело.
Променљиви опсег скале узима функцију сцалеЛинеар () са параметрима домена и опсега како би се уцртао графикон за приказ вредности на скали у графичком формату.
.дата (инфосет) .ентер () помоћи ће у везивању нашег скупа података који је додељен променљивој Инфосет.
Текст се додаје како би се вредности цртале према правоугаоницима различитих дужина који одговарају њиховим вредностима у скупу података.
Спајање, учитавање и рашчлањивање података у Д3.јс
Д3.јс може учитати спољне податке или локално у променљиве из различитих врста датотека и везати их за ДОМ елементе.
Различити формати података су ЦСВ, ЈСОН, ТСВ и КСМЛ, док су д3.цсв (), д3.ЈСОН (), д3.тсв () и д3.кмл () одговарајуће методе за учитавање датотека података у различите формати из спољних извора слањем хттп захтева на наведени урл за учитавање датотека или података одговарајућих формата, као и извршавање функције повратног позива са рашчлањеним одговарајућим објектима података.
Синтакса за учитавање ЦСВ датотеке података дата је у наставку.
d3.csv (url (, row, callback));# 1) Први УРЛ параметра горе је УРЛ или путања сервера цсв датотеке која је спољна датотека коју учитава функција д3.цсв. у нашем случају јесте
хттп: // лоцалхост: 8080 / примери / филм_публисхед.цсв
#два) Други параметар није обавезан
# 3) Трећи параметар је Повратни позив који је функција коју друга функција може проследити као аргумент, осигуравајући да се одређени код изврши док други код већ не изврши извршење за ЈСОН, ТСВ и КСМЛ формате датотеке, функција д3.цсв је замењен са д3.јсон, д3.тсв, односно д3.кмл.
Пример за рашчлањивање спољних података дат је у наставку.
d3.csv('movie_published.csv', function(data) { console.log(data); }); 
Ако се отвори у прегледачу Гоогле Цхроме, кликните на Ф12 и освежавање странице ће приказати дневник конзоле из кода који је у нашем случају цонсоле.лог (подаци), који ће приказати вредности из скупа података, са главама колона, именом_филма и годином бити приказан из ЦСВ датотеке која се чува на локацији сервера.
Манипулација случајним бројевима у Д3.јс
д3 - случајне АПИ методе враћају случајне бројеве из различитих расподела вероватноће, што је математичка функција која израчунава шансе за могуће могуће исходе.
Ове функције првенствено користе математику. случајна функција ЈаваСцрипт-а која даје бројеве који се налазе између минималног и максималног броја наведеног опсега, резултира јединственим бројем сваки пут када се израчуна математика. извршава се случајна функција.
- д3.рандомУниформ - Генеришите случајне бројеве из уједначене расподеле. На пример. д3.рандомУниформ (1, 2) () - вратиће случајне бројеве који укључују 1 и мање од 2.
- д3.рандомНормал - генерисати случајне бројеве из нормалне расподеле, На пример. д3.рандомНормал (1, 2) () - вратиће цео број који се налази између наведене минималне вредности и максималне вредности.
- д3.рандомЛогНормал - Генеришите случајне бројеве из лог-нормалне расподеле, а очекивана вредност биће вредност природног логаритма за случајну променљиву.
- д3.рандомБатес - Генеришите случајне бројеве из Батесове дистрибуције, са независним променљивим.
- д3.рандомИрвинХалл - Генеришите случајне бројеве из Ирвин-Халл-ове расподеле.
- д3.рандомЕкпонентиал - Генеришите случајне бројеве из експоненцијалне расподеле.
Пример случајних функција у д3
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)()+'
');
Интерполација у Д3.јс
АПИ методе које се примењују за интерполацију између две случајне вредности зависиће од типа завршне вредности б, Општа синтакса је д3.интерполате (а, б). Доље је дата табела у којој су наведени типови података крајње вредности б и одговарајући метод или функција који ће се променити према типу података.
| Тип крајње вредности б | Коришћен назив методе |
|---|---|
| Ако је б генерички низ | интерполатеАрраи () |
| Ако је б логичка вредност, нула или недефинисана | Користиће се константа б |
| Ако је б број | интерполатеНумбер () |
| Ако је б боја или низ који се односи на боју | интерполатеРгб () |
| Ако је б датум | интерполатеДате () |
| Ако је б низ | интерполатеСтринг () |
| Ако је б откуцани низ бројева | интерполатеНумберАрраи () |
| Ако се б односи на број | интерполатеНумбер () |
| Иначе | интерполатеОбјецт () |
Следећи пример објашњава:
- д3.интерполатеНумбер () функција са 10 као почетна вредност и крајња вредност 20, приказане вредности се крећу од почетне вредности 10 до крајње вредности 20 за парамеле интерполације од (0,0) до (0,5) до (1,0)
- д3.интерполатеРгб () функција за два различита имена боја која резултирају одговарајућим ргб (‘р’, ’г’, ’б’) вредностима за интерполиране парамере од (0,0) до (0,5) до (1,0)
- д3.интерполатеДате () функција за два различита датума у формату „ииии-мм-дд хх: мм: сс“, приказаће датуме између горњег распона датума, за парамеле интерполације од (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)+ '
');
Обликовање и интернационализација текста помоћу Д3.јс
Форматирање текста и локализација могу се постићи у Д3.јс помоћу функције Број формат, Датум и Локал, као што је објашњено у наставку са примерима.
Д3 - локално ()
д3.лоцале (дефиниција), вратиће локализацију специфичну за дефиницију, по дефаулту је дефиниција локализације амерички енглески за д3.лоцале (дефиниција),
Јава програмирање питања и одговори за писмени тест
Својства за форматирање бројева за дефиницију локализације наведена су у наставку.
- децималан: Децимална тачка се обично примењује у валутама попут 25,75 ( На пример. '.').
- хиљаде: Хиљада је идентификатор или сепаратор који се користи као зарез након хиљаду вредности попут 2.475 ( На пример. ',').
- груписање: Група низа за сваку групу и величина могу се проверити помоћу Арраинаме (5), где је 5 индекс, а величина низа је 6 чланова.
- валута: Префикс и суфикс за низове валута ( На пример. ('$', '')).
- Датум време: Формат датума и времена (% ц) имаће датум и време ( На пример. „% А% б% е% Кс% И“).
- датум: Датум (% к) ( На пример. „% М /% д /% И“) низ формата у месецу Дан и година.
- време: Време (% Кс) ( На пример. Низ формата „% Х:% М:% С“) у сатима минутима и секундама.
- периоди: Локални локалитет А.М. и П.М. еквиваленти ( На пример. ('АМ ПМ')).
- дана: Дани у недељи, почевши од недеље, у абецеди.
- кратки дани: Кратки дани или скраћени називи као што су СУН, ПОН, итд. Радним данима, почевши од недеље.
- месеци: Пуни називи месеца су октобар (почев од јануара).
- схортМонтхс: Кратки месеци или скраћени називи као што су ЈАН, ФЕБ, МАР, итд. Месеци (почев од јануара).
Сви горе наведени параметри приказани су као променљиве са одговарајућим вредностима на следећој слици.
Д3.формат
д3.формат из ЈаваСцрипт библиотеке узима број као улазни аргумент, синтакса је д3.формат (спецификатор), да би се трансформисали бројеви користи се д3.формат.
Пример примене формата заснован на д3 је дат у наставку.
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); }); 
Модификовање формата датума помоћу Д3.јс
Форматирање времена помоћу библиотеке Д3.јс, где се д3.тимеПарсе може применити са знаковима џокер знака, тј. Регуларним изразом који помаже у претварању формата улазног времена у жељени формат.
Пример формата који се односи на време и датум дат је у наставку.
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()) +'
');
Закључак
У овом упутству смо покрили све преостале основне методе Д3.јс-а, попут везивања података, где су подаци у облику низа и придруживања, учитавања, као и подаци за рашчлањивање у ЦСВ, ЈСОН и КСМЛ формату.
Такође смо разговарали о манипулацији помоћу случајних бројева и методи интерполације како бисмо визуелизовали групе података на графиконима или графиконима, те обликовали текст и локализацију помоћу метода д3.лоцале за бројеве, датум, време и различите валуте локалног језика.
Препоручено читање
- Водич за ЈаваСцрипт убризгавање: Тестирајте и спречите ЈС нападе убризгавањем на веб локацију
- ТОП 45 ЈаваСцрипт интервјуа са детаљним одговорима
- 10 најбољих алата за тестирање АПИ-ја у 2021. години (СОАП и РЕСТ АПИ алати за тестирање)
- Водич за тестирање АПИ-ја: Комплетан водич за почетнике
- Кодови одговора на АПИ за одмор и врсте захтева за одмор
- РЕСТ АПИ тестирање са краставцем применом БДД приступа
- Водич за АПИ за одмор: РЕСТ АПИ архитектура и ограничења
- Топ 10 најбољих алата за управљање АПИ-јем са упоређивањем карактеристика
- 20 најважнијих питања и одговора за испитивање АПИ тестирања