Share
D3.js is een prachtige JavaScript-bibliotheek die wordt gebruikt voor het maken van interactieve en visueel aantrekkelijke afbeeldingen. d3.js staat voor Data Driven Documents and uses HTML, SVG en CSS om zijn magie uit te voeren. Van de officiële documenten,
d3.js is een JavaScript-bibliotheek voor het manipuleren van documenten op basis van gegevens. D3 helpt u gegevens tot leven te brengen met behulp van HTML, SVG en CSS. D3's nadruk op webstandaarden biedt u de volledige mogelijkheden van moderne browsers zonder uzelf te binden aan een eigen framework, waarbij krachtige visualisatiecomponenten en een datagedreven benadering van DOM-manipulatie worden gecombineerd.
Deze zelfstudie is een inleidende zelfstudie over D3.js, waarin we ons concentreren op enkele eenvoudige dingen om een dynamische grafiek te maken. In de loop van deze zelfstudie zullen we zien hoe u een diagram met meerdere regels kunt maken met behulp van de bibliotheek D3.js.
Als u op zoek bent naar een snelle oplossing, vindt u een selectie JavaScript-diagramitems op Envato Market.
Vanaf slechts een paar dollar is het een geweldige manier om iets in een paar minuten te implementeren dat veel langer zou duren om helemaal opnieuw te kunnen bouwen!
U kunt scripts vinden om alles te maken, van eenvoudige lijndiagrammen tot complexe infographics.
JavaScript-grafiekitems op Envato MarketAls u aan de slag wilt gaan met D3.js, downloadt u D3.js en neemt u deze op, of u kunt rechtstreeks een koppeling naar de nieuwste versie van D3.js maken..
We beginnen met het maken van de X- en Y-assen voor onze grafiek. We gebruiken een aantal voorbeeldgegevens om de grafiek uit te zetten.
Hier is de basis bare-bones HMTL-code van index.html:
Om te beginnen, hebben we enkele voorbeeldgegevens nodig. Dit zijn onze voorbeeldgegevens:
var data = ["sale": "202", "year": "2000", "sale": "215", "year": "2001", "sale": "179", " year ":" 2002 ", " sale ":" 199 "," year ":" 2003 ", " sale ":" 134 "," year ":" 2003 ", " sale ":" 176 "," jaar ":" 2010 "];
Scalable Vector Graphics (SVG) is een op XML gebaseerd afbeeldingsformaat voor het tekenen van 2D-afbeeldingen met ondersteuning voor interactiviteit en animatie. We gebruiken een svg element om onze grafiek te tekenen. Voeg de toe svg element in index.html:
Laten we vervolgens een paar constanten definiëren zoals breedte, hoogte, linkermarge, enz., die we zullen gebruiken tijdens het maken van de grafiek. D3 biedt een methode genaamd d3.select om een element te selecteren. We gebruiken d3.select om de te selecteren svg element uit index.html.
Accentsconagua
var vis = d3.select ("# visualization"), WIDTH = 1000, HEIGHT = 500, MARGINS = top: 20, right: 20, bottom: 20, left: 50,Op basis van de gegevens moeten we schalen maken voor de X- en Y-assen. We hebben de maximale en minimale waarde van de beschikbare gegevens nodig om de schalen op de assen te maken. D3 biedt een API-methode met de naam d3.scale.linear die we zullen gebruiken om schalen voor de assen te maken.
d3.scale.linear gebruikt twee eigenschappen genaamd reeks en domein om de schaal te maken. reeks definieert het beschikbare gebied om de grafiek weer te geven, en Domein definieert de maximale en minimale waarden die we moeten plotten in de beschikbare ruimte.
xScale = d3.scale.linear (). bereik ([MARGINS.left, WIDTH - MARGINS.right]). domain ([2000,2010]),
reeks is opgegeven in de bovenstaande code, zodat deze niet over de randen blijft hangen. Maximum- en minimumwaarden voor het domein zijn ingesteld op basis van de gebruikte steekproefgegevens.
Definieer ook de yScale zoals getoond:
yScale = d3.scale.linear (). bereik ([HEIGHT - MARGINS.top, MARGINS.bottom]). domain ([134,215]),
Laten we vervolgens de assen maken met behulp van de schalen die in de bovenstaande code zijn gedefinieerd. D3 biedt een API-methode met de naam d3.svg.axis om assen te maken.
xAxis = d3.svg.axis () .scale (xScale), yAxis = d3.svg.axis () .scale (yScale);
Voeg vervolgens de gemaakte X-as toe aan de svg container zoals afgebeeld:
vis.append ("svg: g"). call (xAxis); Sla de wijzigingen op en probeer te bladeren index.html. Je zou iets moeten hebben als:
Zoals je kunt zien, is de X-as getekend, maar er zijn enkele problemen. Eerst moeten we het verticaal naar beneden plaatsen. Terwijl we de X-as aan de SVG-container toevoegen, kunnen we de eigenschap transform gebruiken om de as naar beneden te verplaatsen. We zullen gebruiken vertaal transform om de as te verplaatsen op basis van coördinaten. Omdat we de X-as alleen naar beneden moeten verplaatsen, geven we de transformatiecoördinaten voor de X-as als 0 en de Y-as net boven de marge.
vis.append ("svg: g") .attr ("transform", "translate (0," + (HEIGHT - MARGINS.bottom) + ")"). call (xAxis);Laten we nu de Y-as toevoegen. Voeg de volgende code toe om de Y-as aan de SVG-container toe te voegen:
vis.append ("svg: g"). call (yAxis);Sla de wijzigingen op en blader index.html en je zou beide assen moeten hebben zoals getoond.
Zoals je kunt zien in de bovenstaande schermafbeelding, de Y-as bevindt zich niet in de juiste positie. Dus, we moeten de oriëntering van de hierboven getoonde Y-as links. Zodra de as is uitgelijnd aan de linkerkant, passen we de D3-transformatie toe om deze correct naast de X-as te plaatsen. Voeg de toe oriënteren eigendom van de Y-as om de oriëntatie te veranderen.
yAxis = d3.svg.axis () .scale (yScale) .orient ("left");D3 toepassen transformeren tijdens het proberen om de Y-as naar de SVG-container:
vis.append ("svg: g") .attr ("transformeren", "vertalen (" + (MARGINS.left) + ", 0)"). call (yAxis);We hebben de y-coördinaat van vertalen als 0 behouden, omdat we deze alleen horizontaal wilden verplaatsen. Sla de wijzigingen op en blader index.html. Je zou zoiets als moeten zien:
Om de voorbeeldgegevens in onze grafiek te plotten, moeten we de xScale en de yScale naar de coördinaten om ze te transformeren en een lijn te tekenen over de plotruimte. D3 biedt een API-methode genaamd d3.svg.line () om een lijn te tekenen. Dus voeg de volgende code toe:
var lineGen = d3.svg.line () .x (functie (d) return xScale (d.year);) .y (function (d) retourneer yScale (d.sale););
Zoals je in de bovenstaande code kunt zien, hebben we de x- en y-coördinaten voor de regel opgegeven volgens de xScale en yScale eerder gedefinieerd.
Vervolgens voegen we een lijnpad toe aan svg en wijs de voorbeeldgegevens toe aan de plotruimte met behulp van de lineGen functie. We zullen ook enkele attributen voor de regel specificeren, zoals beroerte kleur, streekbreedte, enz., zoals hieronder getoond:
vis.append ('svg: path') .attr ('d', lineGen (data)) .attr ('stroke', 'green') .attr ('stroke-width', 2) .attr ('fill' , 'geen');Sla de wijzigingen op en blader index.html. U zou de lijngrafiek moeten hebben zoals getoond:
Standaard heeft de lijn lineaire interpolatie. We kunnen de interpolatie specificeren en een aantal CSS toevoegen aan de assen om het er beter uit te laten zien.
var lineGen = d3.svg.line () .x (functie (d) return xScale (d.year);) .y (functie (d) retourneer yScale (d.sale);) .interpolate (" basis");Voeg de volgende CSS toe aan index.html:
.aspad invullen: geen; streek: # 777; vormweergave: crispEdges; .axis tekst font-family: Lato; lettergrootte: 13px;
Voeg de klas toe aan beide xAs en Y-as:
vis.append ("svg: g") .attr ("class", "axis") .attr ("transform", "translate (0," + (HEIGHT - MARGINS.bottom) + ")"). call ( xAs); vis.append ("svg: g") .attr ("class", "axis") .attr ("transform", "translate (" + (MARGINS.left) + ", 0)"). call (yAxis) ;Met basis interpolatie en wat CSS, hier is hoe het eruit zou moeten zien:
Overweeg een andere voorbeeldgegevensset zoals weergegeven:
var data2 = ["sale": "152", "year": "2000", "sale": "189", "year": "2002", "sale": "179", " year ":" 2004 ", " sale ":" 199 "," year ":" 2006 ", " sale ":" 134 "," year ":" 2008 ", " sale ":" 176 "," jaar ":" 2010 "];
Voor de eenvoud hebben we twee verschillende voorbeeldgegevensverzamelingen met hetzelfde overwogen X-as waarden. Om het hierboven getoonde te plotten gegevens2 naast gegevens, we moeten gewoon een ander svg-pad toevoegen aan de svg element. Het enige verschil is dat de gegevens die zijn doorgegeven aan de schaal naar de lineGen functie is gegevens2. Hier is hoe het eruit zou moeten zien:
vis.append ('svg: path') .attr ('d', lineGen (data2)) .attr ('stroke', 'blue') .attr ('stroke-width', 2) .attr ('fill' , 'geen');Sla de wijzigingen op en blader index.html. U zou de meerlijnige grafiek kunnen zien zoals getoond:
In deze zelfstudie hebben we gezien hoe u aan de slag kunt gaan met het maken van een eenvoudig diagram met meerdere lijnen met behulp van D3.js. In het volgende deel van deze serie gaan we met deze zelfstudie naar het volgende niveau door het diagram met meerdere lijnen dynamisch te maken en we voegen ook een aantal functies toe om de grafiek interactiever te maken..
Broncode van deze tutorial is beschikbaar op GitHub.
Laat het ons weten in de reacties hieronder!
