Naučite D3.js za 5 minuta

Uvod u stvaranje vizualnih prikaza vaših podataka

D3.js je JavaScript knjižnica koja se koristi za manipulaciju dokumentima na temelju podataka. Koristi HTML, CSS i SVG za stvaranje vizualnih prikaza podataka koji se mogu pregledavati u bilo kojem modernom pregledniku.

Također pruža neke sjajne značajke za interakcije i animacije.

U ovom uputstvu istražit ćemo osnovne pojmove i značajke D3.js. Naučit ćemo kako ga koristiti uz pomoć nekoliko primjera poput prikazivanja trakasti grafikona, prikazivanja HTML i SVG elemenata te primjene transformacija i događaja na njih.

Također smo kreirali besplatni tečaj od 10 dijelova na D3.js na Scrimbi. Pogledajte ovdje.

Početak rada s D3

Kako je D3.js JavaScript knjižnica, možete ga jednostavno uključiti u svoju HTML datoteku unutar oznake skripte.

Puni izvor i testovi također su dostupni za preuzimanje na GitHubu.

DOM odabir

Korištenjem D3.js možemo manipulirati objektnim modelom dokumenta (DOM), što znači da možemo odabrati elemente i primijeniti razne transformacije na njih.

Krenimo od jednostavnog primjera, gdje ćemo pomoću D3 odabrati i promijeniti boju i veličinu fonta oznake naslova.

 Learn D3 in 5 minutes

Today is a beautiful day!!

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

Dakle, jednostavno ulančavamo select()metodu u d3objekt, a zatim pratimo style(). Prvi parametar diktira što želimo promijeniti, a drugi daje vrijednost. Evo rezultata:

Vezanje podataka

Sljedeći koncept koji ćete trebati naučiti je vezivanje podataka, jer je to jedna od najslađih karakteristika D3. Koristeći ga, možemo popuniti ili manipulirati DOM elementima u stvarnom vremenu.

U našem HTML-u imamo jednostavan nesređeni popis <ul>:

    Želimo stvoriti elemente popisa pomoću podatkovnog objekta. Evo koda za točno to:

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

    U našem JavaScript kodu iznad, D3 prvo odabire <ul> an d any

  • elementi de it uskoji elect() andkoriste metode selectAll (). Može se činiti pomalo čudno da leodabiremo sve elemente li prije nego što smo ih kreirali, ali D3 upravo tako funkcionira.

    Zatim podatke prosljeđujemo data()metodom i dodajemo enter(), koja djeluje poput petlje. Sve nakon ove točke izvršit će se jednom po stavci u fruitsnizu.

    Drugim riječima, tada dodaje <li> za svaku stavku u podacima. Za evergod

  • Original text


  • Oznaka, ona također dodaje tekst unutar t usinmetode text (). Th eparametar d inside povratnog poziva funkcija teksta () se odnosi na element u polju na danoj iteracija (jabuke, mang o, i tako dalje).

    Evo i našeg konačnog rezultata:

    Izrada SVG elemenata

    Skalabilna vektorska grafika (SVG) način je prikazivanja grafičkih elemenata i slika u DOM-u. Kako se SVG temelji na vektorima, istovremeno je lagan i skalabilan. D3 koristi SVG kako bi stvorio sve svoje vizualne elemente, pa je stoga temeljni blok knjižnice.

    Ovdje se u primjeru u nastavku crta pravokutnik pomoću D3 u SVG spremniku.

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

    U ovom kodu D3 prikazuje element pravokutnika unutar DOM-a. Prvo odabire SVG element, a zatim unutar njega generira element pravokutnika. Također attr()metodom postavlja koordinate x i y pravokutnika, zajedno sa širinom, visinom i svojstvima popunjavanja .

    Izrada trakasti grafikona

    D3 nam također omogućuje stvaranje puno različitih vrsta grafikona i grafikona za prikaz podataka na učinkovit način. U donjem primjeru izrađujemo jednostavni trakasti grafikon pomoću D3.

    Krenimo od stvaranja SVG oznake izravno u našem HTML-u.

    Zatim ćemo napisati JavaScript koji nam je potreban da bismo pružili trakasti grafikon u našem 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 :-)