Kuidas luua oma esimene tulpdiagramm D3.js abil

Andmete visualiseerimise õpetus algajatele.

D3.js on kõige populaarsem JavaScripti kogu teie andmete visuaalsete esituste loomiseks. Kuid see on natuke keeruline õppida, nii et ma arvan, et on oluline alustada pehmelt.

Selles õpetuses saate teada, kuidas D3-ga oma esimest tulpdiagrammi luua. See annab teile sissejuhatuse kõige olulisematele kontseptsioonidele, kuid on siiski tore midagi ehitada.

Oleme koostanud ka tasuta D3.js kursuse Scrimba kohta. Vaata siit.

Alustame nüüd

Seadistamine

Kasutame kõige lihtsamat seadistamist, lihtsalt D3-teegi CDN-ist importimine.


  
    
  
  
     
    
    
  

Kirjutame D3-koodi skriptisilti. Teiseks lisasime DOM-i elemendi . Kui soovite selle õpetuse lugemise ajal koodiga ringi mängida, siis vaadake seda Scrimba mänguväljakut, mis sisaldab koodi lõplikku versiooni.

Esimese asjana valime selle elemendi ja stiilime seda natuke.

var svgLaius = 500;
var svgHeight = 300;
var svg = d3.select ('svg')
    .attr ("laius", svgWidth)
    .attr ("kõrgus", svgHeight)
    .attr ("klass", "tulpdiagramm");

Anname sellele laiuse ja kõrguse, pluss-ribadiagrammi klassi. Meie CSS-is oleme klassi kujundanud nii:

.tulpdiagramm {
    taustavärv: # C7D9D9;
}

Siin on tulemus:

Nüüd on meil kena SVG konteiner, kuhu saame joonistada oma tulpdiagrammi. Selle tegemise kood on natuke keeruline, nii et vaatame kõigepealt kogu asja läbi ja siis kõnnime kõik sammud läbi:

var andmestik = [80, 100, 56, 120, 180, 30, 40, 120, 160];
var barPadding = 5;
var barWidth = (svgWidth / andmestiku pikkus);
var barChart = svg.selectAll ("rect")
    .data (andmestik)
    .sisenema()
    .append ("rect")
    .attr ("y", funktsioon (d) {
        tagasi svgHeight - d
    })
    .attr ("kõrgus", funktsioon (d) {
        tagasi d;
    })
    .attr ("laius", barWidth - barPadding)
    .attr ("teisendamine", funktsioon (d, i) {
         var tõlkida = [ribalaius * i, 0];
         tagasta "tõlgi (" + tõlgi + ")";
    });

Vali kõik()

Esimene asi, mis me teeme, võib tunduda pisut imelik, me teeme .selectAll ("rect"), kuid me pole veel elemente loonud. Nii tagastab see meetod tühja valiku (tühi massiiv). Kuid loome varsti <õige> elemendid, kasutades enter (). Append ().

See võib tunduda pisut segane. Kuid selle seletamine, kuidas selectAll () töötab koos enter (). Append () -ga, jääb selle õpetuse ulatusest välja. Kui soovite seda õigesti mõista, lugege seda artiklit väga hoolikalt.

andmed ()

Seejärel aheldame andme () meetodi ja edastame selle oma andmekogumis. Lõpuks dikteerivad andmed iga riba kõrguse.

sisenema()

Järgmine samm on enter () meetodi aheldamine. Sisestusklahv Enter () vaatab nii teie sisestatud andmestikku () kui ka valiku, mille tegime SelectAll ('rect') abil, ja seejärel proovib otsida „vasteid“. Nii loob see teie andmete ja DOM.

Kuid pidage meeles, et meetod SelectAll ('rect') tagastab tühja valiku, kuna DOM-is pole veel elemente. Kuid andmestikus on üheksa üksust. Seega pole ühtegi vastet.

Enter () meetod võimaldab teil seejärel luua DOM-is uue andmeelemendi <õige> iga andmestiku üksuse jaoks, millel puudub veel vastav <õige> element.

lisa ()

Järgmisele reale lisame elemendi iga üksuse jaoks. Kuna see meetod järgneb pärast sisestust (), siis teostatakse seda tegelikult üheksa korda, üks iga andmepunkti kohta, millel puudub DOM-is vastav <õige>.

attr ()

Järgmine samm on iga ristküliku (meie riba) kuju otsustamine. Peame andma sellele neli atribuuti: kõrgus, laius, x-asend ja y-asend. Kõigi nende jaoks kasutame meetodit attr ().

Alustame y-positsioonist:

.attr ("y", funktsioon (d) {
    tagasi svgHeight - d
})

Esimene parameeter dikteerib, millist atribuuti me soovime lisada: antud juhul riba y-koordinaat. Teises saame juurdepääsu tagasihelistamise funktsioonile, mille käigus tagastame väärtuse, mida meie atribuudil oleks.

Siit saame juurdepääsu itereerimisprotsessi selles etapis olevale andmepunktile (pidage meeles, et seda meetodit kutsutakse üks kord iga andmekogude massiivi üksuse kohta). Andmepunkti hoitakse d-argumendis. Seejärel lahutame antud andmepunkti d meie SVG konteineri kõrgusest.

X- ja y-koordinaadid arvutatakse alati vasakpoolsest ülanurgast. Nii et lahutades konteineri kõrguse d väärtusega, saame riba ülaosa y-koordinaadi.

Riba sirgumiseks sellest punktist kuni SVG-konteineri põhjani peame andma sellele andmepunkti väärtusega võrdse kõrguse:

.attr ("kõrgus", funktsioon (d) {
    tagasi d;
})

Järgmine samm on anda sellele laius:

.attr ("laius", barWidth - barPadding)

Siin on tegemist lihtsalt lihtsa väljendiga, mitte tagasihelistamise funktsiooniga, kuna me ei vaja juurdepääsu andmepunktile. Me võtame lihtsalt aluseks ribalaiusmuutuja, mille lõime edasi, mis on konteineri kogulaius jagatud ribade arvuga. Iga riba vahel väikese tühiku saamiseks lahutame ka polstri, milleks määratleme 5.

Viimane samm on x-koordinaatide määramine. See väljend on natuke keerulisem:

.attr ("teisendamine", funktsioon (d, i) {
    var xCoordinate = barWidth * i;
    tagasta "tõlgi (" + xCoordinate + ")";
});

Esiteks võtame tagasihelistamisel kasutusele teise parameetri, st. See on massiivi antud üksuse indeks.

Iga riba koordinaadi määramiseks korrutame indeksi lihtsalt muutuva ribalaiusega. Seejärel tagastame stringi väärtuse, mis kirjeldab x-telje teisendust, näiteks „tõlgi (100)”. See lükkaks riba 100 pikslit paremale.

Ja just nagu teie jaoks on teie esimene tulpdiagramm D3.js.

Kui soovite teada saada D3.js-ist rohkem, tutvuge kindlasti Scrimba kursusega.

Täname, et lugesite! Minu nimi on Per, olen Scrimba kaasasutaja ja armastan aidata inimestel uusi oskusi õppida. Jälgige mind Twitteris, kui soovite saada teavitust uute artiklite ja ressursside kohta.