Õppige D3.js 5 minutiga

Sissejuhatus oma andmete visuaalsete esituste loomiseks

D3.js on JavaScripti teek, mida kasutatakse andmete põhjal dokumentide manipuleerimiseks. See kasutab HTML-i, CSS-i ja SVG-d andmete visuaalsete esituste loomiseks, mida saab vaadata igas kaasaegses brauseris.

Samuti pakub see ägedaid funktsioone interaktsioonide ja animatsioonide jaoks.

Selles õpetuses uurime D3.js põhimõisteid ja funktsioone. Õpime seda kasutama mõne näite abil, näiteks tulpdiagrammi renderdamine, HTML- ja SVG-elementide renderdamine ning neile teisenduste ja sündmuste rakendamine.

Oleme ka loonud tasuta 10-osalise kursuse D3.js-ist Scrimba kohta. Vaadake seda siit.

D3-ga alustamine

Kuna D3.js on JavaScripti teek, saate selle lihtsalt oma HTML-faili skriptimärgendi sisse lisada.

Täielik allikas ja testid on saadaval ka GitHubi allalaadimiseks.

DOM-i valik

D3.js-i abil saame manipuleerida dokumendi objektimudeliga (DOM), see tähendab, et saame elemente valida ja neile erinevaid transformatsioone rakendada.

Alustame lihtsa näitega, kus D3 abil valime ja muudame pealkirja sildi värvi ja fondi suurust.

 Learn D3 in 5 minutes

Today is a beautiful day!!

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

Nii et me aheldame select()meetodi lihtsalt d3objektile ja seejärel järgime seda style(). Esimene parameeter dikteerib, mida me muuta tahame, ja teine ​​annab väärtuse. Siin on tulemus:

Andmete sidumine

Järgmine mõiste, mida peate õppima, on andmete sidumine, kuna see on üks D3 lahedamaid omadusi. Selle abil saame DOM-elemente reaalajas asustada või nendega manipuleerida.

Meie HTML-is on meil lihtne tellimata loend <ul>:


    

    Soovime loendielemendid luua andmeobjekti abil. Täpselt selle tegemiseks on vajalik kood:

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

    Meie ülaltoodud JavaScripti koodis valib D3 kõigepealt <ul> an d any

  • elemendid, mida kasutatakse de it uss elect() andselectAll () meetodites. Võib tunduda natuke imelik, et vaatame lekõiki li elemente enne nende loomist, kuid just nii töötab D3.

    Seejärel edastame andmed data()meetodi abil ja lisame enter(), mis töötab umbes nagu silmus. Kõik pärast seda punkti täidetakse üks kord fruitsmassiivi üksuse kohta .

    Teisisõnu lisab see <li> iga üksuse kohta andmetele. Suhe every

  • märgend, lisab see teksti i t usin(text () meetodi sisse ka teksti. Th eparameetri d inside teksti () tagasihelistamisfunktsioonile viitab element massiivi hetkel antud iteratsiooni (õun, mang o, ja nii edasi).

    Nii et siin on meie lõpptulemus:

    SVG elementide loomine

    Skaalautuv vektorgraafika (SVG) on viis graafiliste elementide ja piltide renderdamiseks DOM-is. Kuna SVG on vektoripõhine, on see nii kerge kui ka skaleeritav. D3 kasutab SVG-d kõigi oma visuaalide loomiseks ja seetõttu on see raamatukogu põhiline ehitusplokk.

    Siin allpool toodud näites joonistatakse SVG konteineris ristkülik, kasutades D3.

    //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');

    Selles koodis renderdab D3 DOM-is ristkülikukujulist elementi. Kõigepealt valib see SVG elemendi ja renderdab seejärel selle sees ristküliku elemendi. Samuti määrab attr()meetodi abil ristküliku x- ja y-koordinaadid koos selle laiuse, kõrguse ja täitmisomadustega .

    Tulpdiagrammi loomine

    D3 võimaldab meil luua palju erinevaid graafikuid ja graafikuid, et andmeid tõhusalt kuvada. Allpool toodud näites loome D3 abil lihtsa tulpdiagrammi.

    Alustuseks loome SVG-märgendi otse meie HTML-i.

    Seejärel kirjutame vajaliku JavaScripti, et ribariba meie saidil renderdada 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 :-)