Lær D3.js på 5 minutter

En introduktion til at skabe visuelle repræsentationer af dine data

D3.js er et JavaScript-bibliotek, der bruges til at manipulere dokumenter baseret på data. Det bruger HTML, CSS og SVG til at skabe visuelle repræsentationer af data, der kan ses i enhver moderne browser.

Det giver også nogle fantastiske funktioner til interaktioner og animationer.

I denne vejledning vil vi udforske de grundlæggende begreber og funktioner i D3.js. Vi lærer at bruge det ved hjælp af få eksempler som gengivelse af et søjlediagram, gengivelse af HTML- og SVG-elementer og anvendelse af transformationer og begivenheder til dem.

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

Kom godt i gang med D3

Da D3.js er et JavaScript-bibliotek, kan du blot inkludere det i din HTML-fil inde i et script-tag.

Den fulde kilde og testene kan også downloades på GitHub.

DOM-valg

Ved hjælp af D3.js kan vi manipulere Document Object Model (DOM), hvilket betyder at vi kan vælge elementer og anvende forskellige transformationer på dem.

Lad os starte med et simpelt eksempel, hvor vi bruger D3 til at vælge og ændre farven og skriftstørrelsen på et overskriftstag.

 Learn D3 in 5 minutes

Today is a beautiful day!!

d3.select('h3').style('color', 'darkblue'); d3.select('h3').style('font-size', '24px');

Så vi kæder simpelthen select()metoden på d3objektet og følger derefter op med style(). Den første parameter dikterer, hvad vi vil ændre, og den anden giver værdien. Her er resultatet:

Databinding

Det næste koncept, du skal lære, er databinding, da det er en af ​​de sejeste funktioner i D3. Ved hjælp af det kan vi udfylde eller manipulere DOM-elementer i realtid.

I vores HTML har vi en simpel uordnet liste <ul>:


    

    Vi vil oprette listeelementerne ved hjælp af et dataobjekt. Her er koden til at gøre præcis det:

     var fruits = ['apple', 'mango', 'banana', 'orange']; d3.select('ul') .selectAll('li') .data(fruits) .enter() .append('li') .text(function(d) { return d; });

    I vores JavaScript-kode ovenfor vælger D3 først <ul> an d any

  • elementer, der de it usindeholder s elect() andselectAll () metoder. Det kan virke lidt underligt, at vi levælger alle li-elementer, før vi har oprettet dem, men sådan fungerer D3.

    Vi sender derefter dataene ind med data()metoden og tilføjer enter(), som fungerer som en løkke. Alt efter dette punkt udføres en gang pr. Element i fruitsarrayet.

    Med andre ord tilføjer det derefter en <li> for hvert element i data. For every

  • tag, det tilføjer også tekst inde i t usinf.eks. metoden text (). Th eparameter d inside teksten () callback funktion refererer til elementet i arrayet ved den givne iteration (æble, mang o, og så videre).

    Så her er vores endelige resultat:

    Oprettelse af SVG-elementer

    Scalable Vector Graphics (SVG) er en måde at gengive grafiske elementer og billeder i DOM. Da SVG er vektorbaseret, er det både let og skalerbart. D3 bruger SVG til at oprette alle sine visuals, og det er derfor en kernebyggesten i biblioteket.

    Her i eksemplet nedenfor tegnes et rektangel ved hjælp af D3 i en SVG-container.

    //Select SVG elementvar svg = d3.select('svg');
    //Create rectangle element inside SVGsvg.append('rect') .attr('x', 50) .attr('y', 50) .attr('width', 200) .attr('height', 100) .attr('fill', 'green');

    In this code, D3 is rendering a rectangle element inside the DOM. It first selects the SVG element and then renders a rectangle element inside it. It also sets x and y coordinates of the rectangle along with its width, height, and fill properties using the attr() method.

    Creating a Bar Chart

    D3 also lets us create a lot of different types of charts and graphs to represent data in efficient ways. In the example below, we are creating a simple bar chart using D3.

    Let’s start out by creating an SVG tag directly in our HTML.

    Then, we’ll write the JavaScript we need in order to render the bar chart in our vg> tag:

    var data = [80, 120, 60, 150, 200];
    var barHeight = 20;
    var bar = d3.select('svg') .selectAll('rect') .data(data) .enter() .append('rect') .attr('width', function(d) { return d; }) .attr('height', barHeight - 1) .attr('transform', function(d, i) { return "translate(0," + i * barHeight + ")"; });

    In this code, we have an array of numbers which we will use to render our bar chart. Each item in an array would represent a single bar. We make use of the fact that bars are just rectangles with variable width or height.

    After selecting the SVG and rectangle elements, we pass our dataset using the data() method and call enter() to start looping on data.

    For each data item, we render a rectangle and set its width equivalent to its value. We then set the height of each bar, and to avoid overlapping, we provide some padding to it by subtracting 1 from barHeight.

    We then transform our bars using the translate property which will position every rectangle one after another rather than starting from the same point. transform() takes a callback function which gets data and index in its parameters. We translate the rectangle on the y-axis, by multiplying index with the height of the bar.

    Here’s the result:

    Event Handling

    Finally, let’s also look at event handling. D3 also supports built-in and custom events which we can bind to any DOM element with its listener. In the example below, we are binding the click event to the button and appending a heading tag to a body in its event handler.

    d3.select('#btn') .on('click', function () { d3.select('body') .append('h3') .text('Today is a beautiful day!!'); });

    So when we click the button, the text below appears:

    Conclusion

    D3.js is a very powerful, yet simple, JavaScript library that allows you to play with and bring life to documents based on data using HTML, CSS, and SVG.

    There are a lot of good resources available online to learn D3.js. There is a free course on D3.js which we have created on Scrimba and is available for free here.

    Thank you :)

    I am Sohaib Nehal. I am a Full-Stack Web Application Developer. You can reach me at [email protected] or on Twitter @Sohaib_Nehal. Thank you :-)