d3 js api functions tutorial with examples
In deze tutorial worden verschillende API-functies van D3.js uitgelegd om functies toe te voegen zoals gegevensbinding, samenvoegen, gegevens laden en parseren, interpolatie, enz.:
D3.js is een open-source JavaScript-gegevensvisualisatiebibliotheek die bestaat uit verschillende API-functies die opwindende functies toevoegt, zoals gegevensbinding, samenvoegen, laden en ontleden van externe gegevens in CSV-, XML- en JSON-indeling, manipuleren van willekeurige getallen, interpolatie en tekst opmaak en internationalisering samen met verschillende functies zoals animatie, overgang en grafiekvorming voor visualisatie van gegevens.
beste systeemreiniger voor Windows 10
U kunt hierover verwijzen naar onze eerdere tutorials d3-reeks om meer te weten over de kenmerken, voordelen en vereisten.
Wat je leert:
Gegevensbinding met D3.js
Om datavisualisaties zoals grafieken en grafieken te maken, is het nodig om gegevens te binden of samen te voegen met een DOM-element.
Gegevens kunnen een array zijn die een container is die numerieke waarden van dezelfde typen bevat, zoals hieronder wordt weergegeven.
De eerste stap is het maken van een SVG-object, om een vlak of een raamwerk te hebben om gegevensvisualisatie van externe gegevens te bouwen, het HTML-element wordt geselecteerd met d3.select () en voeg SVG toe dat als canvas fungeert door attributen toe te voegen zoals breedte en hoogte voor het canvas.
De volgende stap is het invoegen van SVG-element ‘g’ dat werkt als een groep die andere SVG-elementen bevat.
Bind of voeg gegevens samen aan deze SVG-vorm die is bevestigd met canvas, met behulp van de .data (data) -functie.
De volgende stap is om gegevens aan de DOM-elementen te binden met behulp van de .enter () methode aan de .data (data) functie.
Voeg verder een SVG-vorm toe zodat we de vorm aan het canvas kunnen bevestigen.
Een voorbeeld van gegevensbinding wordt hieronder gegeven.
Om gegevens te binden, wat in ons geval een continentale bevolkingsdichtheid is
var infoset = (59.5, 17.2, 9.6, 7.6, 5.5, 0.5)
Het variabele scherm wordt toegewezen aan een tekengebied door de SVG-vorm aan het html-element te koppelen, wat in ons geval de hoofdtekst is.
Het bereik van de variabele schaal heeft de functie scaleLinear () met domein- en bereikparameters om een grafiek te plotten om waarden op de schaal in een grafisch formaat weer te geven.
.data (infoset) .enter () zal helpen bij het binden van onze dataset die is toegewezen aan een variabele Infoset.
Tekst wordt toegevoegd om de waarden af te zetten tegen de rechthoeken van verschillende lengtes die overeenkomen met hun waarden in de dataset.
Gegevens samenvoegen, laden en parseren in D3.js
D3.js kan externe gegevens of lokaal in variabelen uit verschillende soorten bestanden laden en deze gegevens aan DOM-elementen binden.
Verschillende gegevensformaten zijn CSV, JSON, TSV en XML, terwijl d3.csv (), d3.JSON (), d3.tsv () en d3.xml () de respectievelijke methoden zijn om gegevensbestanden in verschillende formaten van externe bronnen door een http-verzoek naar de opgegeven url te sturen om bestanden of gegevens van respectieve formaten te laden en om de callback-functie uit te voeren met geparseerde respectieve data-objecten.
De syntaxis om het CSV-gegevensbestand te laden is zoals hieronder weergegeven.
# 1) De eerste parameter url hierboven is de URL of het serverpad van het csv-bestand dat een extern bestand is dat moet worden geladen door de functie d3.csv. in ons geval is dat zo
http: // localhost: 8080 / voorbeelden / movie_published.csv
#twee) De tweede parameter is optioneel
# 3) De derde parameter is Callback, een functie die kan worden doorgegeven als een argument door een andere functie, en ervoor zorgt dat specifieke code wordt uitgevoerd totdat een andere code al klaar is met uitvoeren voor JSON-, TSV- en XML-indelingen van het bestand, functie d3.csv is vervangen door respectievelijk d3.json, d3.tsv en d3.xml.
Hieronder wordt een voorbeeld gegeven om externe gegevens te ontleden.
Indien geopend in de Google Chrome-browser, klik op F12 en bij het vernieuwen van de pagina wordt het consolelogboek weergegeven met de code die in ons geval console.log (gegevens) is, die waarden uit de gegevensset weergeeft, met kolomkoppen, filmnaam en jaar. worden weergegeven vanuit het CSV-bestand dat op de serverlocatie wordt bewaard.
Willekeurige getallen manipuleren in D3.js
d3 - willekeurige API-methoden retourneren willekeurige getallen uit verschillende kansverdelingen, wat een wiskundige functie is die de kans berekent dat verschillende uitkomsten voorkomen.
Deze functies gebruiken voornamelijk de Math. willekeurige functie van JavaScript die getallen produceert die tussen het minimum en een maximum aantal van het opgegeven bereik vallen, het resulteert in een uniek getal elke keer dat de Math. willekeurige functie wordt uitgevoerd.
- d3.willekeurigUniform - Genereer willekeurige getallen uit een uniforme distributie. Bijv. d3.randomUniform (1, 2) () - retourneert willekeurige getallen inclusief 1 en kleiner dan 2.
- d3.willekeurigNormaal - Genereer willekeurige getallen uit een normale verdeling, Bijv. d3.randomNormal (1, 2) () - retourneert een geheel getal dat tussen een opgegeven minimumwaarde en maximumwaarde ligt.
- d3.randomLogNormal - Genereer willekeurige getallen op basis van een lognormale verdeling, en de verwachte waarde is de natuurlijke logaritme voor de willekeurige variabele.
- d3.randomBates - Genereer willekeurige getallen uit een Bates-distributie, met onafhankelijke variabelen.
- d3.willekeurig IrwinHall - Genereer willekeurige getallen uit een Irwin-Hall-distributie.
- d3. willekeurig Exponentieel - Genereer willekeurige getallen uit een exponentiële verdeling.
Voorbeeld van willekeurige functies in d3
Interpolatie in D3.js
API-methoden die worden toegepast om tussen twee willekeurige waarden te interpoleren, zijn afhankelijk van het type van de eindwaarde b. Algemene syntaxis is d3. interpoleren (a, b). Hieronder vindt u een tabel met de gegevenstypen van de eindwaarde b en de bijbehorende methode of functie die zal veranderen volgens het gegevenstype.
| Type eindwaarde b | Gebruikte methode naam |
|---|---|
| Als b een generieke array is | interpolateArray () |
| Als b Booleaans is, null of niet gedefinieerd | Constante b wordt gebruikt |
| Als b een getal is | interpolateNumber () |
| Als b een kleur of string is die naar kleur verwijst | interpolateRgb () |
| Als b een datum is | interpolateDate () |
| Als b een string is | interpolateString () |
| Als b een getypte reeks getallen is | interpolateNumberArray () |
| Als b verwijst naar nummer | interpolateNumber () |
| Anders | interpolateObject () |
Het onderstaande voorbeeld legt uit:
- d3.interpolateNumber () functie met 10 als startwaarde en eindwaarde als 20, weergegeven waarden variëren van startwaarde 10 tot eindwaarde 20 voor interpolatieparameters van (0.0) tot (0.5) tot (1.0)
- d3.interpolateRgb () functie voor twee verschillende kleurnamen die resulteren in overeenkomstige rgb (‘r’, ’g’, ’b’) waarden als resultaat, voor interpolatieparameters van (0.0) tot (0.5) tot (1.0)
- d3.interpolateDate () functie voor twee verschillende datums in het formaat ‘jjjj-mm-dd uu: mm: ss’, geeft datums weer tussen het bovenstaande datumbereik, voor interpolatieparameters van (0.0) tot (1.0)
Een voorbeeld van interpolatie voor getallen, kleuren en datums tussen het bereik wordt hieronder gegeven.
Tekstopmaak en internationalisering met D3.js
Tekstopmaak en lokalisatie kan worden bereikt in D3.js met nummeropmaak, datumnotatie en locale functies zoals hieronder uitgelegd met voorbeelden.
D3 - lokaal ()
d3.locale (definition), retourneert locale die specifiek is voor de definitie, standaard is de locale-definitie Amerikaans Engels voor d3.locale (definition),
core java interviewvragen voor seleniumtesters
De eigenschappen voor getalnotatie voor de locale-definitie worden hieronder weergegeven.
- decimale: De komma wordt meestal toegepast in valuta's zoals 25.75 ( Bijv.
- duizenden: Duizend is een identifier of een scheidingsteken dat wordt gebruikt als komma na duizend waarden, zoals 2,475 ( Bijv.
- groepering: Groep van Array voor elke groep en de grootte kan worden gecontroleerd met behulp van Arrayname (5), waarbij 5 een index is en de grootte van de array 6 leden.
- valuta: Voorvoegsel en achtervoegsel voor de valutatekenreeksen ( Bijv.
- datum Tijd: Het datum- en tijdformaat (% c) heeft de datum en tijd ( Bijv. '% A% b% e% X% Y').
- datum: De datum (% x) ( Bijv. '% M /% d /% Y') formaatstring in maand dag en jaar.
- tijd: De tijd (% X) ( Bijv. '% H:% M:% S') formaatstring in uren, minuten en seconden.
- periodes: De A.M. en P.M. equivalenten ( Bijv. ('AM PM')).
- dagen: Dagen van de week, beginnend met zondag, in alfabetten.
- korte dagen: Korte dagen of afgekorte namen zoals SUN, MON, etc van de weekdagen, beginnend met zondag.
- maanden: De volledige namen van de maand zijn oktober (beginnend met januari).
- shortMonths: Korte maanden of afgekorte namen zoals JAN, FEB, MAR, etc. van de maanden (beginnend met januari).
Alle parameters die hierboven zijn uitgelegd, worden weergegeven als variabelen met hun respectieve waarden in de volgende afbeelding.
D3.formaat
d3.format uit JavaScript-bibliotheek neemt een getal als invoerargument, de syntaxis is d3.format (specificatie), om getallen te transformeren, wordt d3.format gebruikt.
Een voorbeeld van het toepassen van formaat op basis van d3 wordt hieronder gegeven.
Wijzigen met datumnotaties met D3.js
Tijdopmaak met behulp van de D3.js-bibliotheek, waarbij d3.timeParse kan worden toegepast met jokertekens, d.w.z. reguliere expressie die helpt om het invoertijdformaat om te zetten naar het gewenste formaat.
Een voorbeeld van het formaat met betrekking tot tijd en datum wordt hieronder gegeven.
Gevolgtrekking
In deze zelfstudie hebben we alle resterende essentiële methoden van D3.js behandeld, zoals gegevensbinding waarbij gegevens in de vorm van een array en samenvoegen, laden en parseren van gegevens in CSV-, JSON- en XML-indeling zijn.
We hebben ook gesproken over manipulatie met behulp van willekeurige getallen en de interpolatiemethode om gegevensgroepen in grafieken of grafieken te visualiseren, en tekst en lokalisatie op te maken met behulp van d3.locale-methoden voor getallen, datum, tijd en verschillende lokale valuta's.
Aanbevolen literatuur
- Zelfstudie over JavaScript-injectie: JS-injectie-aanvallen op de website testen en voorkomen
- TOP 45 JavaScript-interviewvragen met gedetailleerde antwoorden
- 10 beste API-testtools in 2021 (SOAP- en REST API-testtools)
- API-testhandleiding: een complete gids voor beginners
- Rest API-antwoordcodes en soorten rustverzoeken
- REST API-testen met komkommer met behulp van BDD-benadering
- Rest API-zelfstudie: REST API-architectuur en beperkingen
- Top 10 beste API-beheertools met functievergelijking
- Top 20 belangrijkste API-testvragen en antwoorden op sollicitatiegesprekken