Share
In het vorige deel van deze serie hebben we gezien hoe u aan de slag kunt gaan met het maken van een diagram met meerdere regels met behulp van de JavaScript-bibliotheek D3.js. In deze zelfstudie nemen we het naar het volgende niveau door ervoor te zorgen dat het diagram met meerdere lijnen dynamisch op dynamische gegevens reageert en we zullen nog meer functies toevoegen naarmate de zelfstudie vordert.
Laten we beginnen door het eerste deel van de tutorial vanuit GitHub te klonen.
git clone https://github.com/jay3dec/MultiLineChart_D3.git
Navigeren naar MultiLineChart_D3 en blader index.html, en u moet een grafiek met meerdere regels hebben op basis van de voorbeeldgegevens.
In de vorige zelfstudie, toen we maakten xScale en yScale gebruik makend van reeks en Domein, we hebben het minimum en maximum voor het domein hard gecodeerd. Om onze grafiek flexibeler te maken, moeten we de minimum- en maximumwaarden voor het domein dynamisch van de gegevensbron lezen.
D3.js biedt de d3.min en d3.max methoden om de minimum- en maximumwaarden uit een array te halen. We zullen gebruik maken van deze functies om de minimum- en maximumwaarden voor het domein te krijgen.
We kunnen de minimumwaarde van een array krijgen zoals getoond:
d3.min (gegevens, functie (d) return d.value;)
Op dezelfde manier, om de maximale waarde te krijgen:
d3.max (gegevens, functie (d) return d.value;)
Vervang eenvoudig de minimum en maximum waarden in de xScale domein zoals getoond:
xScale = d3.scale.linear (). bereik ([MARGINS.left, WIDTH - MARGINS.right]). domain ([d3.min (data, functie (d) ga terug d.jaar;), d3.max (data, functie (d) return d.year;)]),
Vervang op dezelfde manier het yScale domein:
yScale = d3.scale.linear (). bereik ([HEIGHT - MARGINS.top, MARGINS.bottom]). domain ([d3.min (data, functie (d) return d.sale;), d3.max (data, functie (d) return d.sale;)]),
Sla alle wijzigingen op en blader index.html. Nu zou je de grafiek goed moeten laten werken, zoals eerder. Het enige verschil is dat het de maximale en minimale waarden van het domein dynamisch oppikt.
Als u één JSON-object voor de steekproef houdt, kunt u de gegevens eenvoudiger parseren en in de grafiek plotten. Dus combineer de twee stukken voorbeeldgegevens in een enkele JSON-gegevensreeks, zoals hieronder weergegeven:
var data = ["Client": "ABC", "sale": "202", "year": "2000", "Client": "ABC", "sale": "215", "year" : "2002", "Client": "ABC", "sale": "179", "year": "2004", "Client": "ABC", "sale": "199", " year ":" 2006 ", " Client ":" ABC "," sale ":" 134 "," year ":" 2008 ", " Client ":" ABC "," sale ":" 176 " , "year": "2010", "Client": "XYZ", "sale": "100", "year": "2000", "Client": "XYZ", "sale": " 215 "," year ":" 2002 ", " Client ":" XYZ "," sale ":" 179 "," year ":" 2004 ", " Client ":" XYZ "," sale " : "199", "year": "2006", "Client": "XYZ", "sale": "134", "year": "2008", "Client": "XYZ", " verkoop ":" 176 "," jaar ":" 2013 "];
Nu zullen we onze code aanpassen om onze grafiekschaal dynamisch te maken volgens de voorbeeldgegevensverzameling en de bijbehorende waarden.
Vervolgens zullen we de gegevens splitsen en organiseren op basis van Cliënt zodat we voor elk een lijngrafiek kunnen tekenen Cliënt in de gegevens. D3 biedt een methode genaamd d3.nest die helpt om gegevens te ordenen op basis van een bepaald sleutel veld. We zullen gebruiken d3.nest om de gegevens te sorteren op basis van Cliënt zoals getoond:
var dataGroup = d3.nest () .key (functie (d) return d.Client;) .entries (data);
Hier is hoe het DATAGROUP zou kijken:
["key": "ABC", "values": ["Client": "ABC", "sale": "202", "year": "2000", "Client": "ABC", "sale": "215", "year": "2002", "Client": "ABC", "sale": "179", "year": "2004", "Client": "ABC "," sale ":" 199 "," year ":" 2006 ", " Client ":" ABC "," sale ":" 134 "," year ":" 2008 ", " Client ": "ABC", "verkoop": "176", "jaar": "2010"], "sleutel": "XYZ", "waarden": ["Klant": "XYZ", "verkoop": "100", "jaar": "2000", "Client": "XYZ", "sale": "215", "year": "2002", "Client": "XYZ", "sale ":" 179 "," jaar ":" 2004 ", " Client ":" XYZ "," sale ":" 199 "," year ":" 2006 ", " Client ":" XYZ ", "verkoop": "134", "jaar": "2008", "Klant": "XYZ", "verkoop": "176", "jaar": "2013"]]
Verwijder vervolgens de svg regelpadcode voor lijncreatie die we eerder hard codeerden.
Accentsconagua
vis.append ('svg: path') .attr ('d', lineGen (data)) .attr ('stroke', 'green') .attr ('stroke-width', 2) .attr ('fill' , 'geen'); vis.append ('svg: path') .attr ('d', lineGen (data2)) .attr ('stroke', 'blue') .attr ('stroke-width', 2) .attr ('fill' , 'geen');In plaats daarvan herhalen we de DATAGROUP en maak een lijngrafiek voor elk Cliënt zoals getoond:
dataGroup.forEach (functie (d, i) vis.append ('svg: path') .attr ('d', lineGen (d.values)) .attr ('stroke', 'blue') .attr (' lijnbreedte ', 2) .attr (' vullen ',' geen '););Sla de wijzigingen op en probeer te bladeren index.html. U zou de meerlijnige grafiek kunnen zien zoals getoond:
Laten we ook enkele willekeurige kleuren toevoegen aan de grafieklijnen. Om willekeurige kleuren toe te voegen, gebruiken we de methode d3.hsl. Wijzig de beroerte attribuut van de lijngrafiek zoals hieronder getoond om willekeurige kleuren voor de lijnen te krijgen.
dataGroup.forEach (functie (d, i) vis.append ('svg: path') .attr ('d', lineGen (d.values)) .attr ('stroke', functie (d, j) ga terug "hsl (" + Math.random () * 360 + ", 100%, 50%)";) .attr ('stroke-width', 2) .attr ('fill', 'none');) ;Sla de wijzigingen op en blader index.html. U zou willekeurige kleuren moeten zien voor de lijnen in de grafiek.
Vervolgens voegen we toe legends voor de cliënten in de voorbeeldgegevens. Zodra legendes zijn toegevoegd, voegen we een klikgebeurtenis toe aan de legendes die de weergave van de respectieve lijndiagrammen zou omschakelen.
Om de legenda toe te voegen, moeten we eerst de marge onderaan en marge top naar 50 om de legendes te herbergen.
var vis = d3.select ("# visualization"), WIDTH = 1000, HEIGHT = 500, MARGINS = top: 50, right: 20, bottom: 50, left: 50,Terwijl het itereren van de DATAGROUP, we voegen de legendes voor de bijbehorende lijngrafieken toe. Legends toevoegen is vrij eenvoudig. Definieer eerst de legendaruimte op basis van het aantal Clients of lijngrafieken dat we gaan tekenen:
lSpace = WIDTH / dataGroup.length;
Voeg een tekst toe aan svg-element met x- en y-coördinaten terwijl u de DATAGROUP na het maken van de regel zoals getoond:
vis.append ("tekst") .attr ("x", (lSpace / 2) + i * lSpace) .attr ("y", HEIGHT) .style ("fill", "black") .text (d. sleutel);We hebben de legendaruimte aangepast (lSpace) Op basis van het aantal legendes dat we moeten laten zien, zodat alle legendes op gelijke afstand van elkaar staan. We hebben de legende gedeeld door 2, zodat deze in het midden is uitgelijnd in de ruimte en zo zal zijn naarmate het verder gaat, zoals we toevoegen (i * lSpace) voor aankomende legendes.
Sla alle wijzigingen op en probeer te bladeren index.html en je zou de legendes onder de X-as moeten zien.
Laten we een beetje stijl toevoegen aan de legendes om ze vet te laten lijken. Voeg de volgende CSS toe aan index.html:
.legende font-size: 14px; lettertype: vet;
Voeg de klas toe legende naar de gecreëerde legende.
vis.append ("tekst") .attr ("x", (lSpace / 2) + i * lSpace) .attr ("y", HEIGHT) .style ("fill", "black") .attr ("class "," legend ") .text (d.key);
Laten we nu klikgebeurtenissen toevoegen aan elk van de weergegeven legendes om de weergave van de corresponderende regel in de meerlijnige grafiek te schakelen.
Eerst moeten we een toevoegen ID kaart voor elke lijngrafiek die is gemaakt om de weergave te wijzigen.
.attr ('id', 'regel _' + d.key)Hier ziet u hoe de code voor het maken van regels eruitziet:
vis.append ('svg: path') .attr ('d', lineGen (d.values, xScale, yScale)) .attr ('stroke', functie (d, j) return "hsl (" + Math. random () * 360 + ", 100%, 50%)";) .attr ('stroke-width', 2) .attr ('id', 'line_' + d.key) .attr ('invullen' , 'geen');Voeg vervolgens in het gedeelte voor het maken van de legende het Klik attribuut:
.aan ('klik', functie () alert (d.key);)Sla de wijziging op en blader index.html. Klik op de legendes en u zou de namen van de legendes moeten zien als waarschuwingen.
Laten we vervolgens de code toevoegen om de lijnweergave te wisselen. We hoeven alleen maar de huidige weergavestatus van de lijngrafiek te controleren en de dekking in te schakelen om de lijn overeenkomstig weer te geven en te verbergen.
.on ('klik', functie () var active = d.active? false: true; var onacity = active? 0: 1; d3.select ("# line_" + d.key) .style ("opacity", opacity); d.active = active;)Sla de wijzigingen op en probeer te bladeren index.html. Probeer te klikken op de legendes en de weergave van de bijbehorende lijngrafiek moet wisselen.
In deze zelfstudie hebben we gezien hoe we onze meerlijnige grafiek dynamisch kunnen maken. We hebben ook gezien hoe je D3.js-evenementen kunt maken. Raadpleeg de officiële documentatie voor meer informatie over verschillende andere methoden en API's van D3.js.
Broncode van deze tutorial is beschikbaar op GitHub.
Laat het ons weten in de reacties hieronder!
