Menu

Funkce API D3.js - návod s příklady

d3 js api functions tutorial with examples

Vyzkoušejte Náš Nástroj Pro Odstranění Problémů

Tento výukový program vysvětluje různé funkce API D3.js pro přidání funkcí, jako je datová vazba, spojení, načtení a analýza dat, interpolace atd.:

D3.js je open-source knihovna pro vizualizaci dat v JavaScriptu, která se skládá z různých funkcí API a přidává vzrušující funkce, jako je datová vazba, spojení, načítání a analýza externích dat ve formátu CSV, XML a JSON, manipulace s náhodnými čísly, interpolace a text formátování a internacionalizace spolu s různými funkcemi, jako je animace, přechod a tvorba grafů pro vizualizaci dat.

který nástroj etl je nejlepší na trhu

Můžete si prostudovat naše dřívější výukové programy řada d3 dozvědět se více o jeho funkcích, výhodách a předpokladech.

Funkce API v D3.js

Co se naučíte:

Vazba dat s D3.js

Aby bylo možné vytvořit vizualizaci dat, jako jsou grafy a grafy, je nutné svázat nebo spojit data s prvkem DOM.

Data mohou být pole, které je kontejnerem, který obsahuje číselné hodnoty stejných typů, jak je zobrazeno níže.

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

Prvním krokem bude vytvoření objektu SVG. Aby bylo možné vytvořit rovinu nebo rámec pro vytváření vizualizace dat externích dat, je prvek HTML vybrán pomocí d3.select () a přidáním SVG, který funguje jako plátno, přidáním atributů jako je šířka a výška plátna.

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

Dalším krokem je vložení prvku SVG „g“, který funguje jako skupina obsahující další prvky SVG.

svg.selectAll ('g')

Dále svázat nebo spojit data s tímto tvarem SVG připojeným pomocí plátna pomocí funkce .data (data).

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

Dalším krokem je svázat data s prvky DOM pomocí metody .enter () s funkcí .data (data).

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

Dále připojte tvar SVG, abychom mohli tvar připojit na plátno.

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

Níže je uveden příklad datové vazby.

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'); Spojování, načítání a analýza dat v D3.js
Výstup je zachycen v grafické podobě souřadnic s datovou vazbou

Aby bylo možné vázat data, což je v našem případě kontinentální hustota obyvatelstva

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

Proměnná obrazovka je přiřazena k oblasti kreslení připojením tvaru SVG k prvku html, což je v našem případě tělo.

Proměnné rozpětí měřítka přebírá funkci scaleLinear () s parametry domény a rozsahu, aby bylo možné vykreslit graf a zobrazit hodnoty na měřítku v grafickém formátu.

.data (infoset) .enter () pomůže při vázání naší datové sady přiřazené k proměnné infosetě.

Text se připojí, aby se hodnoty zakreslily proti obdélníkům různých délek odpovídajících jejich hodnotám v datové sadě.

Spojování, načítání a analýza dat v souboru D3.js

D3.js může načíst externí data nebo lokálně do proměnných z různých typů souborů a svázat tato data s prvky DOM.

Různé formáty dat jsou CSV, JSON, TSV a XML, zatímco d3.csv (), d3.JSON (), d3.tsv () a d3.xml () jsou příslušné metody poskytované pro načítání datových souborů v různých formáty z externích zdrojů odesláním požadavku http na zadanou adresu URL, aby se načetly soubory nebo data příslušných formátů a také provedla funkce zpětného volání s analyzovanými příslušnými datovými objekty.

výchozí národní prostředí
Externí data v různých formátech lze zobrazit, jak je uvedeno výše

Syntaxe pro načtení datového souboru CSV je uvedena níže.

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

# 1) První adresa URL parametru výše je adresa URL nebo cesta serveru k souboru csv, což je externí soubor, který se má načíst funkcí d3.csv. v našem případě ano

http: // localhost: 8080 / examples / film_published.csv

#dva) Druhý parametr je volitelný

# 3) Třetí parametr je zpětné volání, což je funkce, kterou lze předat jako argument jinou funkcí, což zajišťuje provedení konkrétního kódu, dokud jiný kód již nedokončí provádění formátů souboru JSON, TSV a XML, funkce d3.csv je nahrazeno d3.json, d3.tsv a d3.xml.

Níže je uveden příklad analýzy externích dat.

d3.csv('movie_published.csv', function(data) { console.log(data); });
d3.csv () načte soubor CSV, jak je zobrazeno výše.

Pokud je otevřen v prohlížeči Google Chrome, klikněte na F12 a obnova stránky zobrazí protokol konzoly z kódu, který je v našem případě console.log (data), který bude zobrazovat hodnoty ze sady dat, s hlavami sloupců, názvem filmu a rokem být zobrazeny ze souboru CSV uloženého v umístění serveru.

Manipulace s náhodnými čísly v D3.js

d3 - náhodné metody API vracejí náhodná čísla z různých rozdělení pravděpodobnosti, což je matematická funkce, která vypočítává pravděpodobnost výskytu různých možných výsledků.

Tyto funkce primárně používají matematiku. náhodná funkce JavaScriptu, která vytváří čísla, která spadají mezi minimální a maximální počet zadaného rozsahu, má za následek jedinečné číslo pokaždé, když je matematika. náhodná funkce se provede.

  • d3.random Uniform - Generujte náhodná čísla z jednotného rozdělení. Např. d3.randomUniform (1, 2) () - vrátí náhodná čísla včetně 1 a méně než 2.
  • d3.random Normální - Generovat náhodná čísla z normálního rozdělení, Např. d3.randomNormal (1, 2) () - vrátí celé číslo, které je mezi zadanou minimální hodnotou a maximální hodnotou.
  • d3.randomLogNormální - Generujte náhodná čísla z log-normálního rozdělení a očekávanou hodnotou bude přirozená hodnota logaritmu pro náhodnou proměnnou.
  • d3.randomBates - Generujte náhodná čísla z Batesovy distribuce s nezávislými proměnnými.
  • d3.randomIrwinHall - Vygenerujte náhodná čísla z distribuce Irwin – Hall.
  • d3.randomExponenciální - Generujte náhodná čísla z exponenciálního rozdělení.

Příklad náhodných funkcí v 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)()+'

');

Zobrazí se výstup náhodných metod d3

Interpolace v D3.js

Metody API aplikované na interpolaci mezi dvěma náhodnými hodnotami budou záviset na typu koncové hodnoty b, Obecná syntaxe je d3.interpolate (a, b). Níže je uvedena tabulka, která uvádí datové typy koncové hodnoty b a odpovídající metodu nebo funkci, která se bude podle datového typu měnit.

Typ koncové hodnoty bPoužitý název metody
Pokud b je obecné poleinterpolateArray ()
Pokud b je Boolean, null nebo undefinedBude použita konstanta b
Pokud b je číslointerpolateNumber ()
Pokud b je barva nebo řetězec, který odkazuje na barvuinterpolateRgb ()
Pokud b je datuminterpolateDate ()
Pokud b je řetězecinterpolateString ()
Pokud b je zadaná řada číselinterpolateNumberArray ()
Pokud b odkazuje na číslointerpolateNumber ()
v opačném případěinterpolateObject ()

Níže uvedený příklad vysvětluje:

  • d3.interpolateNumber () funkce s 10 jako počáteční hodnotou a koncovou hodnotou jako 20, zobrazené hodnoty se pohybují od počáteční hodnoty 10 do koncové hodnoty 20 pro parametry interpolace od (0,0) do (0,5) do (1,0)
  • d3.interpolateRgb () funkce pro dva různé názvy barev, jejichž výsledkem jsou odpovídající hodnoty rgb („r“, „g“, „b“), pro interpolaci parametrů od (0,0) do (0,5) do (1,0)
  • Funkce d3.interpolateDate () pro dvě různá data ve formátu „rrrr-mm-dd hh: mm: ss“, zobrazí data mezi výše uvedeným rozsahem dat, pro parametry interpolace od (0,0) do (1,0)

Níže je uveden příklad interpolace čísel, barev a dat mezi rozsahy.

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)+ '

');

Interpolace v D3.js pro čísla a barvy

Formátování textu a internacionalizace s D3.js

Formátování a lokalizace textu lze dosáhnout v souboru D3.js pomocí číselného formátu, formátu data a funkcí národního prostředí, jak je vysvětleno níže s příklady.

D3 - místní ()

d3.locale (definice), vrátí národní prostředí specifické pro definici, ve výchozím nastavení je definice národního prostředí americká angličtina pro d3.locale (definice),

recenze převaděče z youtube na mp3 online

Vlastnosti formátování čísel pro definici národního prostředí jsou uvedeny níže.

  • desetinný: Desetinná čárka se obvykle používá v měnách jako 25,75 ( Např. „.“).
  • tisíce: Thousand je identifikátor nebo oddělovač, který se používá jako čárka po tisíci hodnotách jako 2 475 ( Např. „,“).
  • seskupení: Skupinu Array pro každou skupinu a velikost lze zkontrolovat pomocí Arrayname (5), kde 5 je index a velikost pole je 6 členů.
  • měna: Předpona a přípona pro měnové řetězce ( Např. ('$', '')).
  • čas schůzky: Formát data a času (% c) bude mít datum a čas ( Např. '% A% b% e% X% Y').
  • datum: Datum (% x) ( Např. „% M /% d /% Y“) formátovací řetězec v Měsíci Den a Rok.
  • čas: Čas (% X) ( Např. „% H:% M:% S“) formátovací řetězec v hodinách, minutách a sekundách.
  • období: Místní nastavení je A.M. a P.M. ekvivalenty ( Např. ('DOPOLEDNE ODPOLEDNE')).
  • dny: Dny v týdnu, počínaje nedělí, v abecedě.
  • shortDays: Krátké dny nebo zkrácené názvy jako SUN, MON atd. Ve všední dny, počínaje nedělí.
  • měsíce: Celá jména měsíce jako říjen (počínaje lednem).
  • shortMonths: Krátké měsíce nebo zkrácené názvy jako JAN, FEB, MAR atd. Měsíců (počínaje lednem).

Všechny parametry vysvětlené výše jsou zobrazeny jako proměnné s příslušnými hodnotami na následujícím obrázku.

Výchozí národní prostředí je en_US, ruské národní prostředí (ru_RU) má konstanty Datum, Čas a Interval.

D3.formát

d3.format z knihovny JavaScript bere číslo jako vstupní argument, syntaxe je d3.format (specifikátor), pro transformaci čísel se používá d3.format.

Níže je uveden příklad použití formátu založeného na 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); });
Formátování použité pro číslo a měnu pomocí d3.formátu

Úpravy formátů data pomocí D3.js

Formátování času pomocí knihovny D3.js, kde lze d3.timeParse použít se zástupnými znaky, tj. Regulárním výrazem, který pomáhá převést formát vstupního času na požadovaný formát.

Níže je uveden příklad formátu týkajícího se času a data.

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()) +'

');

Vysvětlení formátu data a času

Závěr

V tomto kurzu jsme se zabývali všemi zbývajícími základními metodami D3.js, jako je datová vazba, kde jsou data ve formě pole a spojení, načítání a analýza dat ve formátu CSV, JSON a XML.

Diskutovali jsme také o manipulaci pomocí náhodných čísel a interpolační metodě za účelem vizualizace datových skupin v grafech nebo grafech a formátování textu a lokalizace pomocí metod d3.locale pro čísla, datum, čas a různé národní měny.

Doporučené čtení

^