Lær at oprette et linjediagram ved hjælp af D3.js

Brug kraften i D3.js til at tegne smukke repræsentationer af dine data.

D3.js er et open source JavaScript-bibliotek, der bruges til at skabe smukke datarepræsentationer, som vi kan se i enhver moderne browser. Ved hjælp af D3.js kan vi oprette forskellige slags diagrammer og grafer ud fra vores data.

I denne vejledning skal vi oprette et linjediagram, der viser Bitcoin-prisindekset fra de sidste seks måneder. Vi henter data fra en ekstern API og gengiver et linjediagram med etiketter og en akse inde i DOM.

Vi har også oprettet et gratis D3.js-kursus på Scrimba. Tjek det her.

Kom godt i gang

Først og fremmest importerer vi D3.js-biblioteket direkte fra CDN inde i vores HTML.

Vi har også tilføjet et tag inde i vores HTML for at oprette linjediagrammet inde i det ved hjælp af D3.js

Lad os nu gå i retning af at skrive vores JavaScript-kode. Først og fremmest ønsker vi at indlæse vores data fra Bitcoin-prisindekset fra en ekstern API, når DOM er indlæst.

Hent data

var api = '//api.coindesk.com/v1/bpi/historical/close.json?start=2017-12-31&end=2018-04-01';
document.addEventListener("DOMContentLoaded", function(event) { fetch(api) .then(function(response) { return response.json(); }) .then(function(data) { //DO SOMETHING WITH DATA })});

I koden ovenfor bruger vi fetchmetoden til at hente dataene fra en ekstern API. Vi analyserer det derefter ved hjælp af .json()metoden.

Vi vil nu konvertere disse data til nøgle / værdipar, så de er i formatet date:price. Til dette vil vi sende vores data til en anden funktion, der vil analysere og returnere dem i den ønskede form.

Parse data

.....then(function(data) { var parsedData = parseData(data) })
function parseData(data) { var arr = []; for (var i in data.bpi) { arr.push( { date: new Date(i), //date value: +data.bpi[i] //convert string to number }); } return arr;}

Vi videregiver vores data til en funktion, parseDatader returnerer en anden række objekter. Hvert objekt indeholder en dato og prisen på bitcoin den pågældende dato.

Når vi har dataene i vores krævede format, sender vi disse data til den drawChartfunktion, hvor al den resterende kode vil blive skrevet ved hjælp af D3.js for at gengive linjediagrammet.

.....then(function(data) { var parsedData = parseData(data); drawChart(parsedData);})

Vælg SVG-element

I drawChartfunktionen vælger vi først og fremmest vores SVG-element og giver det noget styling.

function drawChart(data) {
 var svgWidth = 600, svgHeight = 400; var margin = { top: 20, right: 20, bottom: 30, left: 50 }; var width = svgWidth - margin.left - margin.right; var height = svgHeight - margin.top - margin.bottom;
 var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight);...

I koden ovenfor indstiller vi bredden og højden på SVG-containeren ved først at vælge den ved hjælp af select()metoden og derefter bruge attr()metoden til at tildele attributterne.

Vi har også defineret margener og bruger deres værdier til at beregne bredde- og højdeattributterne for SVG-containeren. Disse marginværdier hjælper os senere med at placere og vise vores diagram korrekt.

Ved hjælp af CSS har vi givet grænser til vores SVG-container:

 .line-chart { border: 1px solid lightgray; }

Indtil videre har vi intet inde i vores DOM endnu:

Derefter opretter vi et gruppeelement til at holde vores linjediagram, akse og etiketter.

Opret og transformer gruppeelement

...var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")" );

Gruppering af elementer hjælper med at organisere lignende eller relaterede elementer sammen. Her, efter at have gengivet et gruppeelement, giver vi det en vis transformation.

D3 giver os forskellige muligheder for at transformere vores elementer. I koden ovenfor bruger vi translateegenskaben til at omplacere vores gruppeelement med margener til venstre og øverst.

Tilføj skalaer

Nu vil vi tilføje skalaer til vores diagram.

var x = d3.scaleTime().rangeRound([0, width]);
var y = d3.scaleLinear().rangeRound([height, 0]);

Som vi ved, består vores data af datoer og værdien af ​​Bitcoin på disse datoer. Derfor kan vi antage, at x-aksen ville indeholde datoer og y-akse ville indeholde værdier. Det er sådan, vi kan se variationen i linjediagrammet med hensyn til tid.

Og så, i kodestykket ovenfor, oprettede vi en skala for typetid på x-aksen og lineær type på y-aksen. Vi leverer også disse skalaer med intervallerne i henhold til bredden og højden af ​​vores SVG-container.

Opret en linje

Lad os nu gå mod at definere vores linje ved hjælp af d3.linemetoden. Vi definerer linjens x- og y-attributter ved at videregive anonyme funktioner og returnere datoobjektet og bitcoin-værdien for den pågældende dag.

var line = d3.line() .x(function(d) { return x(d.date)}) .y(function(d) { return y(d.value)}) x.domain(d3.extent(data, function(d) { return d.date })); y.domain(d3.extent(data, function(d) { return d.value }));

Tilføj akser

Vi vil nu tilføje vores venstre og nederste akser inde i vores gruppeelement til linjediagrammet. Den venstre akse repræsenterer værdien af ​​bitcoin, mens den nederste akse viser den tilsvarende dato.

g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(x)) .select(".domain") .remove();

In the above code, we are appending a group element inside our main group and translating it at the very bottom our container. Then, we pass d3.axisBottom method in the call function where d3.axisBottom takes the parameter of x which is defined in the Add Scales section.

g.append("g") .call(d3.axisLeft(y)) .append("text") .attr("fill", "#000") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", "0.71em") .attr("text-anchor", "end") .text("Price ($)");

Similar to the bottom axis, we append another group element and then call on it the d3.axisLeft method which takes the parameter of y. Then, we also style our axis by assigning it different attributes and a label.

If we save and refresh the page, we can see our axes being rendered inside the DOM:

Append a Path

In the last step, we will be appending a path inside our main group element. This path will actually draw the line chart as per the values of the data.

Vi sender vores datasæt ved hjælp af datummetoden og indstiller derefter attributterne for fyldfarve, stregfarve og bredde. Til sidst indstiller vi attributten, dsom faktisk giver instruktion til SVG-stien om, hvor stifterne skal forbindes.

g.append("path").datum(data).attr("fill", "none").attr("stroke", "steelblue").attr("stroke-linejoin", "round").attr("stroke-linecap", "round").attr("stroke-width", 1.5).attr("d", line);

Her er det endelige resultat:

Konklusion

Tillykke! Vi har med succes oprettet linjediagrammet ved hjælp af D3.js. Du kan tjekke den officielle dokumentation for D3.js for at lære mere om forskellige diagrammer og grafer, du kan oprette.

Hvis du er interesseret i at lære mere om D3.js, skal du sørge for at tjekke vores gratis kursus om Scrimba.

Jeg er Sohaib Nehal. Jeg er en fuld-stack webapplikationsudvikler. Du kan nå mig på [email protected] eller på Twitter @Sohaib_Nehal. Tak skal du have :-)