Insinööri RisingStack, kiinnostunut JS, Golang, .NET Core.
Äskettäin meillä oli ilo osallistua machine learning-hanke, joka liittyy kirjastojen, kuten Reagoi ja D3.js. Monista tehtävistä, kehitin muutamia kaavioita, jotka auttavat käsittelemään tulosta ML malleja, kuten naiivi pistimet muodossa viivakaavio tai ryhmitelty viivakaavio.,
tässä artikkelissa haluaisin esitellä edistystäni D3: n kanssa.js toistaiseksi ja näyttää perus-käyttö kirjaston kautta yksinkertainen esimerkki pylväsdiagrammi.
tämän artikkelin lukemisen jälkeen opit luomaan D3: n.js kaavioita näin helposti:
täysi lähdekoodi on saatavilla täällä.
Me Risingstackissa ihastumme JavaScript-ekosysteemiin, backendiin ja front-end-kehitykseen. Henkilökohtaisesti olen kiinnostunut molemmista., Backend, en voi nähdä läpi varsinaisen liiketoiminnan logiikan sovellus, kun minulla on myös mahdollisuus luoda mahtava näköinen tavaraa front-end. Siellä D3.JS tulee kuvaan!
Update: a 2nd part of my d3.Js tutorial series on saatavilla myös: Building a D3.js Kalenteri Heatmap (visualisoida StackOverflow Käyttötiedot)
Mikä on D3.js?
D3.js on datavetoinen JavaScript-kirjasto DOM-elementtien manipulointiin.
”D3 auttaa tuomaan dataa elämään HTML: n, SVG: n ja CSS: n avulla., D3 painotetaan web-standardeja, antaa sinulle täyden ominaisuuksia nykyaikaisissa selaimissa ilman sitominen itse oma kehys, jossa yhdistyvät tehokas visualisointi osia ja data-driven lähestymistapa DOM manipulointi.”- d3js.org
miksi loisit kaavioita D3: lla.js ylipäätään? Miksi et vain näyttäisi kuvaa?
no, kaaviot perustuvat kolmannen osapuolen resursseista tulevaan tietoon, joka vaatii dynaamista visualisointia renderointiaikana. Myös SVG on erittäin tehokas työkalu, joka sopii hyvin tähän sovellus tapauksessa.,
lähdetään kiertotietä katsomaan, mitä hyötyä SVG: n käytöstä on.
edut SVG
SVG sanoista Scalable Vector Graphics, joka on teknisesti XML-pohjainen kuvauskieli.
sitä käytetään yleisesti vektorigrafiikan piirtämiseen, linjojen ja muotojen määrittämiseen tai olemassa olevien kuvien muokkaamiseen. Löydät listan saatavilla olevista elementeistä täältä.
Plussat:
- Tuetut kaikissa suurimmissa selaimissa;
- Se on DOM käyttöliittymä, ei vaadi kolmannen osapuolen lib;
- Skaalautuva, se voi säilyttää korkean resoluution;
- pienempi koko verrattuna muihin kuvaformaatteja.,
Miinukset:
- Se voi näyttää vain kaksi-ulotteinen kuvia;
- Pitkä oppimiskäyrä;
- Render voi kestää kauan laskentatehoa vaativia operaatioita.
alamäistään huolimatta SVG on loistava työkalu kuvakkeiden, logojen, kuvitusten tai tässä tapauksessa kaavioiden näyttämiseen.
aloitus D3: lla.js
valitsin pylväsdiagrammi päästä alkuun, koska se on pieni monimutkaisuus visuaalinen elementti, kun se opettaa perus soveltaminen D3.js itse. Tämän ei pitäisi pettää Sinua, D3 tarjoaa suuren joukon työkaluja visualisoida tietoja., Tutustu sen github sivu joitakin todella mukava käyttää tapauksissa!
pylväskaavio voi olla suuntautumisensa perusteella vaaka-tai pystykaavio. Valitsen vertikaalin eli pylväskaavion.
tässä kaaviossa aion näyttää Stack Overflow ’ n vuoden 2018 Kehittäjätutkimuksen tuloksen perusteella top 10 rakastetuinta ohjelmointikieltä.
aika vetää!
SVG on koordinaattijärjestelmä, joka alkaa vasemmasta yläkulmasta (0;0). Positiivinen x-akseli menee oikealle, kun taas positiivinen y-akseli suuntaa pohjaan., Näin ollen SVG: n korkeus on otettava huomioon laskettaessa alkuaineen y-koordinaattia.
Se on tarpeeksi taustan tarkistus, katsotaanpa kirjoittaa koodia!
haluan luoda kaavion, jonka leveys on 1000 pikseliä ja korkeus 600 pikseliä.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>koodinpätkä edellä, en valitse luomasi <svg> elementti HTML-tiedosto, jossa on d3 select. Tämä valintamenetelmä hyväksyy kaikenlaiset valitsin jouset ja palauttaa ensimmäisen vastaavan elementin., Käyttää selectAll jos haluat saada ne kaikki.
i määrittelee myös marginaaliarvon, joka antaa hieman ylimääräistä pehmustetta kaavioon. Pehmustetta voidaan soveltaa <g> – alkuaineella, joka käännetään halutun arvon mukaan. Tästä lähtien vedän tätä ryhmää pitämään terveen etäisyyden muihin sivun sisältöihin.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);Lisäämällä attribuutteja elementti on yhtä helppoa kuin soittamalla attr menetelmä. Menetelmän ensimmäinen parametri ottaa ominaisuuden, jota haluan soveltaa valittuun DOM-elementtiin., Toinen parametri on arvo tai takaisinkutsufunktio, joka palauttaa sen arvon. Yllä oleva koodi yksinkertaisesti siirtää kaavion alun SVG: n (60; 60) asentoon.
tuki D3: ta.JS-syöttömuodot
piirtämisen aloittamiseksi minun on määriteltävä tietolähde, josta työskentelen. Tätä opetusohjelma, käytän tavallinen JavaScript array, joka pitää esineitä nimi kielten ja niiden prosenttiosuudet, mutta on tärkeää mainita, että D3.js tukee useita tietomuotoja.
kirjastossa on sisäänrakennettua toiminnallisuutta ladattavaksi Xmlhttprequestista, .csv-tiedostoja, tekstitiedostoja jne., Kukin näistä lähteistä voi sisältää tietoja, jotka D3.js voi käyttää, ainoa tärkeä asia on rakentaa array niistä. Huomaa, että versiosta 5.0 kirjasto käyttää lupauksia palautteiden sijaan tietojen lataamiseen, mikä on ei-taaksepäin yhteensopiva muutos.
skaalaus, akselit
Let ’ s go on with the axes of the chart. Y-akselin vetämiseksi minun on asetettava alin ja korkein arvoraja, jotka tässä tapauksessa ovat 0 ja 100.
olen työskennellyt prosenttiosuudet tässä opetusohjelmassa, mutta on apuohjelmia tietojen tyypit, muut kuin numerot, jotka selitän myöhemmin.,
minun on jaettava kaavion korkeus näiden kahden arvon välillä samoihin osiin. Tätä varten luon jotain, jota kutsutaan skaalaustoiminnoksi.
const yScale = d3.scaleLinear() .range() .domain();Lineaarinen asteikko on yleisimmin tunnettu skaalaus tyyppi. Se muuntaa jatkuvan tuloalueen jatkuvaksi lähtöalueeksi. Huomaa range ja domain menetelmä. Ensimmäinen ottaa pituuden, joka tulisi jakaa verkkotunnuksen arvojen rajojen kesken.,
Muista, SVG koordinaatisto alkaa vasemmasta yläkulmasta siksi välillä ottaa korkeudella kuin ensimmäinen parametri ja ei ole nolla.
Luominen-akselilla vasemmalla on yhtä helppoa kuin lisäämällä toisen ryhmän ja soittaa d3 on axisLeft menetelmä, jolla skaalaus toiminto parametri.
chart.append('g') .call(d3.axisLeft(yScale));Nyt, jatkaa x-akselilla.
Ole tietoinen siitä, että en käytä scaleBand x-akseli, joka auttaa jakaa alue osaksi bändejä ja laskea koordinaatit ja leveys baareja ylimääräisiä täyte.
D3.,js pystyy myös käsittelemään päivämäärätyyppiä monien muiden joukossa. scaleTime on todella samanlainen kuin scaleLinear paitsi verkkotunnus on tässä joukko päivämääriä.
Piirustuspalkit D3: ssa.js
mieti, millaista panosta tankojen vetämiseen tarvitaan. Ne edustavat kukin arvoa, joka on kuvitettu yksinkertaisilla muodoilla, erityisesti suorakulmioilla. Seuraavassa koodinpätkässä liitän ne luotuun ryhmäelementtiin.
Ensimmäinen, I selectAll elementit kuvio, joka palauttaa tyhjän tulosjoukon., Sitten data – funktio kertoo, kuinka monta elementtiä DOM: ia tulisi päivittää matriisin pituuden perusteella. enter tunnistaa elementit, jotka puuttuvat, jos tiedonsyöttö on valintaa pidempi. Tämä palauttaa uuden valinnan, joka edustaa elementtejä, jotka on lisättävä. Yleensä, tämän jälkeen append joka lisää elementtejä DOM.
periaatteessa kerron D3: lle.js liittää suorakulmion jokaisen jäsenen array.
nyt tämä lisää toistensa päälle vain suorakulmioita, joilla ei ole korkeutta tai leveyttä., Nämä kaksi ominaisuutta on laskettava ja siinä skaalaustoiminnot tulevat taas tarpeeseen.
Katso, lisään suorakulmioiden koordinaatit attr call. Toinen parametri voi olla soittopyynnön, joka kestää 3 parametrit: varsinainen jäsen lähtötiedot, indeksi, ja koko panos.
.attr(’x’, (actual, index, array) => xScale(actual.value))skaalaus toiminto palauttaa koordinoida tietyn domain-arvo. Laskettaessa koordinaatit ovat pala kakkua, temppu on korkeus baarissa., Lasketun y-koordinaatti on vähennettävä korkeus kaavio saada oikea edustus arvo-sarakkeessa.
määrittelen suorakulmioiden leveyden myös skaalausfunktiolla. scaleBand on bandwidth funktio joka palauttaa lasketun leveyden yksi osa perustuu aseta pehmuste.
hyvää työtä, mutta ei niin hieno, eikö?
jotta yleisömme ei vuotaisi silmistä, lisätään hieman tietoa ja parannetaan visuaalisuutta!, 😉
vinkkejä baarikaavioiden tekemiseen
on joitakin pelisääntöjä, joissa viivakaaviot ovat mainitsemisen arvoisia.
- Vältä 3D vaikutuksia;
- Jotta tiedot pistettä intuitiivisesti – aakkosjärjestyksessä tai lajiteltu;
- Pidä etäisyys bändejä;
- Aloita y-akselin 0 ja alin arvo;
- Käytä yhdenmukaisia värejä;
- Lisätä akselien otsikot, otsikko, lähde line.
D3.js-Verkkoon
– haluan korostaa arvoja, lisäämällä ruudukko taustalla.,
Mene eteenpäin, kokeilu sekä pysty-ja vaakasuoria viivoja, mutta minun neuvoni on näyttää vain yksi niistä. Liialliset linjat voivat häiritä. Tämä koodi snippet esittelee, miten lisätä molemmat ratkaisut.
olen mieluummin vertical grid lines tässä tapauksessa, koska ne johtavat silmät ja pitää kokonaiskuvaa tavallinen ja yksinkertainen.
nimilaput D3: ssa.js
haluan myös tehdä kaavion kattavamman lisäämällä joitakin sanallista ohjausta. Annetaan nimi kaavioon ja lisätään tarroja akseleihin.,
Tekstit ovat SVG-elementtejä, jotka voidaan liittää SVG tai ryhmiä. Ne voidaan sijoittaa X-ja y-koordinaateilla, kun Tekstin linjaus tehdään text-anchor – attribuutilla. Voit lisätä etiketti itse, vain soittaa text menetelmä teksti-elementti.
vuorovaikutteisuus D3: n kanssa.js
saimme melko informatiivisen kaavion, mutta silti on olemassa mahdollisuuksia tehdä siitä myös vuorovaikutteinen.
seuraavassa koodilohkossa näytän, miten tapahtuman kuuntelijat lisätään SVG-elementteihin.,
Huomaa, että käytän funktion lausekkeen sijasta nuoli toiminto, koska voin käyttää elementin kautta this avainsana.
asetin valitun SVG-elementin sameuden puoleen alkuperäisestä arvosta hiiren hoverissa ja nollasin sen kursorin poistuessa alueelta.
Voit myös saada hiiren koordinaatit d3.mouse. Se palauttaa X-ja y-koordinaatiston. Näin työkaluvihjeen näyttäminen kursorin kärjessä ei olisi lainkaan ongelma.
silmätippakaavioiden luominen ei ole helppo taidemuoto.,
yksi saattaa vaatia graafisten suunnittelijoiden, UX-tutkijoiden ja muiden mahtavien olentojen viisautta. Seuraavassa esimerkissä aion näyttää muutamia mahdollisuuksia lisätä kaavion!
minulla on hyvin samanlaiset arvot näkyvät kartalla, joten korosta eroja keskuudessa baari arvot, järjestin tapahtuman kuuntelija mouseenter tapahtuma. Joka kerta, kun käyttäjä häilyy tietyn a-sarakkeen päällä, kyseisen palkin päälle piirretään vaakasuora viiva. Lisäksi olen myös laskea eroja verrattuna muiden bändien ja näyttää sen baareja.,
melko siisti, huh? Lisäsin tähän myös sameusesimerkin ja lisäsin riman leveyttä.
transition menetelmä osoittaa, että haluan animoida muutoksia DOM. Sen aikaväli on asetettu duration funktio, joka ottaa millisekuntia argumentteina. Tämä siirtyminen edellä haalistuu bändi väri ja laajentaa leveys baari.
SVG-viivan vetämiseen tarvitsen startin ja kohdepisteen., Tämä voidaan asettaa kautta x1, y1 ja x2, y2 koordinaatit. Rivi ei näy ennen kuin asetan sen värin stroke – attribuutilla.
olen vain paljasti, osa mouseenter tapahtuma täällä, joten pidä mielessä, Sinun täytyy palauttaa tai poistaa muutokset mouseout tapahtuma. Koko lähdekoodi löytyy artikkelin lopusta.
Let ’ s Add Some Style to the Chart!,
katsotaan, mitä olemme tähän mennessä saavuttaneet ja miten voimme ravistella tätä taulukkoa jollain tyylillä. Voit lisätä luokan määritteet SVG elementtejä samalla attr toiminto käytimme ennen.
kaaviossa on mukava toiminnallisuus. Tylsän, staattisen kuvan sijaan se paljastaa myös hiirihypyssä esitettyjen arvojen erot. Otsikko asettaa kaavion asiayhteyteen ja merkinnät auttavat tunnistamaan akselit mittayksikön kanssa. Lisään myös uuden etiketin oikeaan alakulmaan merkitäkseni tulolähteen.,
ainoa jäljellä oleva asia on päivittää värit ja fontit!
listat tummalla pohjalla saavat kirkkaanväriset tangot näyttämään cooleilta. Käytin myös Open Sans kirjasinperhettä kaikkiin teksteihin ja asetin eri etikettien koon ja painon.
huomaatko, että linja meni rikki? Se voidaan tehdä asettamalla stroke-width ja stroke-dasharray määritteet. stroke-dasharray, Voit määrittää kuvion viivoja ja aukkoja, jotka muuttavat ääriviivat muoto.
Ruutulinjat, joissa se käy hankalaksi., Minun täytyy hakea stroke-width: 0 polku elementtejä ryhmässä piilottaa runko kaavio ja olen myös vähentää niiden näkyvyyttä asettamalla peittävyyttä linjat.
kaikki muut css-säännöt kattavat kirjasinkoot ja-värit, jotka löydät lähdekoodista.
Wrapping up our D3.js Bar Chart Tutorial
D3.js on mahtava kirjasto domin manipuloinnille. Sen syvyys piilottaa lukemattomia piilotettuja (oikeastaan ei piilotettu, se on todella hyvin dokumentoitu) aarteita, jotka odottavat löytämistä., Tämä kirjoitus kattaa vain katkelmia sen työkalusetti, jotka auttavat luomaan ei niin keskinkertainen viiva kaavio.
jatka, tutki sitä, käytä sitä ja luo näyttäviä visualisointeja!