D3.js API-funktioner - Handledning med exempel

d3 js api functions tutorial with examples

Denna handledning förklarar olika D3.js API-funktioner för att lägga till funktioner som databindning, anslutning, laddning och analys av data, interpolering, etc:

D3.js är ett JavaScript-datavisualiseringsbibliotek med öppen källkod som består av olika API-funktioner som lägger till spännande funktioner som databindning, koppling, laddning och analys av externa data i CSV-, XML- och JSON-format, manipulera slumptal, interpolering och text formatering och internationalisering tillsammans med olika funktioner såsom animering, övergång och grafbildning för visualisering av data.

java 8 intervjufrågor och svar

Du kan hänvisa till våra tidigare handledning om detta d3-serien för att få veta mer om dess funktioner, fördelar och förutsättningar.

Vad du kommer att lära dig:

• Databindning med D3.js
  • Sammanfoga, ladda och analysera data i D3.js
  • Manipulera slumpmässiga nummer i D3.js
  • Interpolering i D3.js
  • Textformatering och internationalisering med D3.js
    • D3 - lokal ()
    • D3.format
  • Ändra med datumformat med D3.js
• Slutsats
  • Rekommenderad läsning

Databindning med D3.js

För att skapa datavisualisering som diagram och grafer krävs det att binda eller sammanfoga data med ett DOM-element.

Data kan vara en matris som är en behållare som innehåller numeriska värden av samma typ, som visas nedan.

Det första steget blir att skapa ett SVG-objekt, för att ha ett plan eller ett ramverk för att bygga datavisualisering av extern data, väljs HTML-elementet med d3.select () och lägg till SVG som fungerar som en canvas genom att lägga till attribut som bredd och höjd för duken.

Nästa steg är införandet av SVG-elementet 'g' som fungerar som en grupp som innehåller andra SVG-element.

Vidare binda eller sammanfoga data till denna SVG-form som är fäst med duk med .data (data) -funktionen.

Nästa steg är att binda data till DOM-elementen med .enter () -metoden till .data (data) -funktionen.

Lägg till SVG-form så att vi kan fästa formen på duken.

Ett exempel på databindning ges nedan.

För att binda data, vilket i vårt fall är en kontinentvis befolkningstäthet

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

Den variabla skärmen tilldelas ett ritningsområde genom att fästa SVG-form till html-elementet, vilket är kroppen i vårt fall.

Den variabla skalaen tar skalaLinear () -funktionen med domän- och intervallparametrar för att plotta en graf för att visa värden på skalan i ett grafiskt format.

.data (infoset) .enter () hjälper till att binda vår dataset tilldelad en variabel Infoset.

Text läggs till för att plotta värdena mot rektanglarna av olika längd som motsvarar deras värden i datasetet.

Sammanfoga, ladda och analysera data i D3.js

D3.js kan ladda extern data eller lokalt i variabler från olika typer av filer och binda dessa data till DOM-element.

Olika dataformat är CSV, JSON, TSV och XML, medan d3.csv (), d3.JSON (), d3.tsv () och d3.xml () är respektive metoder för att ladda datafiler i olika format från externa källor genom att skicka en http-begäran till den angivna webbadressen för att ladda filer eller data i respektive format samt utföra återuppringningsfunktionen med analyserade respektive dataobjekt.

Syntaxen för att ladda CSV-datafilen är enligt nedan.

# 1) Den första parameterwebbadressen ovan är URL: n eller servervägen till csv-filen, som är en extern fil som ska laddas av d3.csv-funktionen. i vårt fall är det

http: // localhost: 8080 / exempel / movie_published.csv

#två) Den andra parametern är valfri

# 3) Den tredje parametern är återuppringning, som är en funktion som kan skickas som ett argument av en annan funktion, vilket säkerställer att specifik kod körs tills en annan kod redan har slutförts för JSON-, TSV- och XML-format för filen, funktion d3.csv är ersatt med d3.json, d3.tsv respektive d3.xml.

Ett exempel på att analysera externa data ges nedan.

Om du öppnar i Google Chrome-webbläsaren klickar du på F12 så att siduppdateringen visar konsolloggen från koden som i vårt fall är console.log (data), som visar värden från datamängden med kolumnhuvuden, filmnamn och år kommer att visas från CSV-filen som förvaras på servern.

Manipulera slumpmässiga nummer i D3.js

d3 - slumpmässiga API-metoder returnerar slumptal från olika sannolikhetsfördelningar, vilket är en matematisk funktion, som beräknar risken för förekomster av olika resultat.

Dessa funktioner använder främst matematiken. slumpmässig funktion av JavaScript som producerar siffror som faller mellan det minsta och det maximala antalet av det angivna intervallet, resulterar det i ett unikt nummer varje gång matematiken. slumpmässig funktion körs.

• d3.randomUniform - Generera slumptal från en enhetlig fördelning. T.ex. d3.randomUniform (1, 2) () - returnerar slumpmässiga nummer inklusive 1 och mindre än 2.
• d3.randomNormal - Generera slumptal från en normalfördelning, T.ex. d3.randomNormal (1, 2) () - returnerar ett heltal som ligger mellan ett angivet minimivärde och maximivärden.
• d3.randomLogNormal - Generera slumptal från en log-normalfördelning, och det förväntade värdet blir det naturliga logaritmevärdet för den slumpmässiga variabeln.
• d3.randomBates - Generera slumptal från en Bates-distribution med oberoende variabler.
• d3.randomIrwinHall - Skapa slumpmässiga siffror från en Irwin – Hall-distribution.
• d3.randomExponential - Generera slumptal från en exponentiell fördelning.

Exempel på slumpmässiga funktioner i d3

');

Interpolering i D3.js

API-metoder som används för att interpolera mellan två slumpmässiga värden beror på typen av slutvärdet b, Allmän syntax är d3.interpolera (a, b). Nedan följer en tabell som visar datatyper av slutvärdet b och motsvarande metod eller funktion som kommer att ändras enligt datatypen.

Nedanstående exempel förklarar:

• d3.interpolateNumber () -funktion med 10 som startvärde och slutvärde som 20, visade värden sträcker sig från startvärde 10 till slutvärde 20 för interpolering av parametrar från (0.0) till (0.5) till (1.0)
• d3.interpolateRgb () -funktion för två olika färgnamn som resulterar i motsvarande rgb (‘r’, ’g’, ’b’) som resultat för interpolering av params från (0.0) till (0.5) till (1.0)
• d3.interpolateDate () -funktionen för två olika datum i formatet 'åååå-mm-dd hh: mm: ss', visar datum mellan ovanstående datumintervall för interpolering av params från (0.0) till (1.0)

Ett exempel på interpolering för siffror, färger och datum mellan intervallet ges nedan.

');

Textformatering och internationalisering med D3.js

Textformatering och lokalisering kan uppnås i D3.js med nummerformat, datumformat och språkfunktioner som förklaras nedan med exempel.

D3 - lokal ()

d3.locale (definition), kommer att returnera språk som är specifikt för definition, som standard är språkdefinitionen amerikansk engelska för d3.locale (definition),

informatica administratör intervju frågor och svar

Egenskaperna för nummerformatering för språkdefinitionen listas nedan.

• decimal: Decimaltecken används vanligtvis i valutor som 25,75 ( T.ex. '.').
• tusentals: Thousand är en identifierare eller en separator som används som ett komma efter tusen värden som 2475 ( T.ex. ',').
• gruppering: Group of Array för varje grupp och storleken kan kontrolleras med hjälp av Arrayname (5), där 5 är ett index och arraystorleken är 6 medlemmar.
• valuta: Prefix och suffix för valutasträngarna ( T.ex. ('$', '')).
• datum Tid: Datum och tid (% c) -format kommer att ha datum och tid ( T.ex. '% A% b% e% X% Y').
• datum: Datumet (% x) ( T.ex. “% M /% d /% Y”) formatsträng i månadsdag och år.
• tid: Tiden (% X) ( T.ex. “% H:% M:% S”) formatsträng i timmar och minuter.
• perioder: Lokalens A.M. och P.M. ekvivalenter ( T.ex. ('AM PM')).
• dagar: Veckodagar, med början på söndag, i alfabet.
• korta dagar: Kortdagar eller förkortade namn som SUN, MON, etc på vardagarna, med början på söndag.
• månader: Månadens fullständiga namn som oktober (med början i januari).
• shortMonths: Korta månader eller förkortade namn som JAN, FEB, MAR, etc. av månaderna (börjar med januari).

Alla parametrar som förklaras ovan visas som variabler med respektive värden i följande bild.

D3.format

d3.format från JavaScript-biblioteket tar ett tal som inmatningsargument, syntaxen är d3.format (specifierare), för att transformera tal används d3.format.

Ett exempel på tillämpning av format baserat på d3 ges nedan.

Ändra med datumformat med D3.js

Tidsformatering med hjälp av D3.js-biblioteket, där d3.timeParse kan användas med jokertecken, dvs regelbundet uttryck som hjälper till att konvertera ingångstidsformat till önskat format.

Ett exempel på formatet relaterat till tid och datum ges nedan.

');

Slutsats

I denna handledning har vi täckt alla återstående väsentliga metoder för D3.js som databindning där data i form av en matris och sammanfoga, ladda såväl som analysera data är i CSV-, JSON- och XML-format.

Vi diskuterade också manipulation med slumpmässiga siffror och interpoleringsmetod för att visualisera datagrupper i diagram eller grafer, och formatera text och lokalisering med hjälp av d3.locale-metoder för siffror, datum, tid och olika valutor.

Rekommenderad läsning

• JavaScript-injektionshandledning: Testa och förhindra JS-injektionsattacker på webbplatsen
• TOPP 45 Intervjufrågor från JavaScript med detaljerade svar
• De 10 bästa API-testverktygen 2021 (SOAP och REST API-testverktyg)
• API Testing Tutorial: En komplett guide för nybörjare
• Rest API-svarskoder och typer av vilovärden
• REST API-testning med gurka med BDD-metod
• Rest API Tutorial: REST API Architecture And Constraints
• Topp 10 bästa API-hanteringsverktyg med funktionsjämförelse
• Topp 20 viktigaste API-testintervjuer och frågor