Naučte sa vytvárať stĺpcový graf s D3 - návod pre začiatočníkov

D3.js je najobľúbenejšia knižnica JavaScriptu na vytváranie vizuálnych reprezentácií vašich údajov. Je však trochu zložité sa učiť, takže si myslím, že je dôležité začať jemne.

V tomto tutoriále sa dozviete, ako vytvoriť svoj prvý stĺpcový graf s D3. Dá vám úvod do najdôležitejších konceptov a pritom vás baví niečo si budovať.

Vytvorili sme tiež bezplatný kurz D3.js na Scrimbe. Skontrolujte to tu.

Teraz začnime.

Nastavenie

Použijeme najjednoduchšie možné nastavenie, jednoducho importujeme knižnicu D3 z CDN.

Náš kód D3 napíšeme do značky skriptu. Po druhé, do DOM sme pridali prvok. Ak sa chcete pri čítaní tohto tutoriálu pohrať s kódom, pozrite sa na toto ihrisko Scrimba, ktoré obsahuje finálnu verziu kódu.

Prvá vec, ktorú urobíme, je výber tohto prvku a jeho malá úprava.

var svgWidth = 500; var svgHeight = 300; var svg = d3.select('svg') .attr("width", svgWidth) .attr("height", svgHeight) .attr("class", "bar-chart"); 

Dávame tomu šírku a výšku plus .bar-charttriedu. V našom CSS sme triedu upravili takto:

.bar-chart { background-color: #C7D9D9; } 

Výsledok:

Teraz máme pekný kontajner SVG, do ktorého môžeme nakresliť náš stĺpcový graf. Kód je trochu zložitý, takže sa najskôr pozrime na celú vec a potom si prejdime jednotlivé kroky:

var dataset = [80, 100, 56, 120, 180, 30, 40, 120, 160]; var barPadding = 5; var barWidth = (svgWidth / dataset.length); var barChart = svg.selectAll("rect") .data(dataset) .enter() .append("rect") .attr("y", function(d) { return svgHeight - d }) .attr("height", function(d) { return d; }) .attr("width", barWidth - barPadding) .attr("transform", function (d, i) { var translate = [barWidth * i, 0]; return "translate("+ translate +")"; }); 

vybrať všetko()

Prvá vec, ktorú urobíme, sa môže zdať trochu čudná, robíme to .selectAll("rect"), zatiaľ sme však ešte nevytvorili žiadne prvky. Táto metóda teda vráti prázdny výber (prázdne pole). Avšak čoskoro vytvoríme prvky pomocou enter().append().

Môže sa to zdať trochu mätúce. Vysvetlenie, ako selectAll()funguje v kombinácii s, enter().append()je však mimo rozsahu tohto tutoriálu. Ak tomu chcete správne porozumieť, veľmi pozorne si prečítajte tento článok.

údaje ()

Potom data()metódu zreťazíme a odovzdáme náš dataset. Údaje nakoniec určia výšku každého pruhu.

vstúpiť ()

Ďalším krokom je reťazenie enter()metódy. enter()Vyzerá ako na dátovej sady, ktorou prechádza do data()  a na výber sme urobili s selectAll('rect'), a potom sa snažia hľadať "zápasy." Vytvára teda mapovanie medzi vašimi údajmi a DOM.

Pamätajte však, že selectAll('rect')metóda vrátila prázdny výber, pretože v DOM zatiaľ nie sú žiadne prvky. Dátový súbor má však deväť položiek. Neexistujú teda žiadne „zhody“.

enter()Spôsob ďalej umožňuje vytvoriť nový prvok DOM pre každú položku v dátovom súbore, ktorý ešte nemá zodpovedajúci prvok.

pridať ()

Na ďalšom riadku pripojíme prvok pre každú z položiek. Ako bude táto metóda nasledovať potom enter(), bude skutočne vykonaná deväťkrát, jeden pre každý údajový bod, ktorému v DOM chýba zodpovedajúci údaj .

attr ()

Ďalším krokom je rozhodnutie o tvare každého z obdĺžnikov (našich pruhov). Je potrebné, aby to štyri atribúty: výška, šírka, x-polohe a y-polohe . Na attr()všetky tieto použijeme metódu.

Začnime s pozíciou y:

.attr("y", function(d) { return svgHeight - d }) 

Prvý parameter určuje, ktorý atribút chceme pridať: v tomto prípade súradnica y pruhu. V druhom získame prístup k funkcii spätného volania, v ktorej vrátime hodnotu, ktorú chceme, aby mal náš atribút.

Tu získame prístup k údajovému bodu v tomto kroku procesu iterácie (nezabudnite, že táto metóda je vyvolaná raz pre každú položku v datasetpoli). Údajový bod je uložený v dargumente. Potom odčítame daný údajový bod d, od výšky nášho kontajnera SVG.

Súradnice X a y sa vždy počítajú od ľavého horného rohu. Takže keď od tejto dhodnoty odčítame výšku kontajnera , dostaneme súradnicu y pre hornú časť pruhu.

Aby sa lišta roztiahla z tohto bodu do dolnej časti kontajnera SVG, musíme jej dať výšku ekvivalentnú hodnote údajového bodu:

.attr("height", function(d) { return d; }) 

Ďalším krokom je dať jej šírku:

.attr ("šírka", barWidth - barPadding)

Tu jednoducho odovzdávame jednoduchý výraz na rozdiel od funkcie spätného volania, pretože nepotrebujeme prístup k údajovému bodu. Jednoducho berieme základ v barWidthpremennej, ktorú sme vytvorili ďalej, čo je celková šírka kontajnera vydelená počtom pruhov. Aby sme medzi každou z tyčí dostali malú medzeru, odpočítame tiež výplň, ktorú sme definovali ako 5.

Posledným krokom je nastavenie súradníc x. Tento výraz je o niečo zložitejší:

.attr("transform", function (d, i) { var xCoordinate = barWidth * i; return "translate("+ xCoordinate +")"; }); 

Tu, sme predovšetkým Využívať druhý parameter v spätným volaním i. Toto je index danej položky v poli.

Aby sme nastavili súradnicu pre každú z tyčí, jednoducho vynásobíme index s barWidthpremennou. Potom vrátime hodnotu reťazca, ktorá popisuje napríklad transformáciu pre os x "translate(100)". To by posunulo lištu o 100 pixelov doprava.

A práve tak máte svoj prvý stĺpcový graf v D3.js.

Ak sa chcete dozvedieť viac informácií o knižnici D3.js, určite si pozrite náš bezplatný kurz Scrimba.

Vďaka za prečítanie! Moje meno je Per Borgen, som spoluzakladateľom spoločnosti Scrimba - najjednoduchší spôsob, ako sa naučiť kódovať. Ak sa chcete naučiť vytvárať moderné webové stránky na profesionálnej úrovni, mali by ste si pozrieť náš responzívny bootcamp pre webdizajn.