Joka kerta, kun työskentelen projektissa, jossa visualisointeja, projektipäälliköt yleensä reagoida kauhu, kun sanon, etten käytä D3. Mistä huoli johtuu? Miksi en käyttäisi D3: A?
näihin kysymyksiin vastattaessa on ymmärrettävä, missä yhteydessä D3 luotiin., D3 julkaistiin ensimmäisen kerran vuonna 2011, ja se oli tuolloin varsin innovatiivinen.
yleensä mitä näkisit, ovat kirjastot, jotka tarjoavat graafeja laatikosta ja massiivisen vaihtoehtolistan. Tämä voi toimia, mutta ongelma on, että joka kerta, kun joku on uusi vaatimus, vaihtoehto olisi lisättävä ja tuettava. Lopulta päädyt mikä on tehokkaasti kieli, jossa käytät useita esineitä määritellä graafi. D3 otti erilaisen lähestymistavan, sen sijaan, että se antaisi sinulle täydelliset komponentit, se antaa sinulle datavetoisia auttajan toimintoja luoda nämä komponentit itse.,
tällä hetkellä jQueryn ja Backbonen kaltaiset kirjastot olivat suosittuja. Omien kaavioiden luominen näiden kirjastojen avulla olisi ollut haastavaa, varsinkin jos haluat niiden olevan dynaamisia. Selaimet olivat vasta omaksumassa uusia moderneja CSS-standardeja, kuten siirtymiä, ja enemmän moderni ominaisuuksia, kuten flex laatikko oli vielä keskiajalla pois toteutetaan.
D3 ratkaisi paljon näitä ongelmia, ja se oli epäilemättä helpoin tapa toteuttaa visualisointeja tuolloin. Paljon on kuitenkin muuttunut sen jälkeen., Meillä on uusi moderni kehyksiä, jotka käyttävät enemmän joustava ja ilmeikäs käsitteitä, kuten virtual DOM ja CSS on niin monia uusia ominaisuuksia, asettelua ja animaatioita.
Pikemminkin kuin automaattisesti hyppää D3, saanen luetella muutamia syitä, miksi sinun pitäisi harkita käyttää sitä.
olen työskennellyt D3: n kanssa lukuisia kertoja viime vuosien aikana ja toteuttanut sillä kaikenlaisia visualisointeja. Ymmärrän yleiskäsitykset D3: sta, ja sen kanssa kamppailen edelleen. Kaikki, joiden kanssa työskentelin, junioreista seniorikehittäjiin, myös kamppailevat sen kanssa., Monet ihmiset, myös minä, tekevät niin, että löydämme netistä esimerkin, joka vastaa karkeasti etsimäämme, ja muokkaamme esimerkkiä tarpeisiimme sopivaksi.
Jos haluamme lisätä joitakin mukautettuja toimintoja, me luultavasti tehdä joitakin enemmän hakuja, ja löytää jotain, joka tavallaan näyttää oikein, yritä ymmärtää, miten se toimii, ja pitää muuttaa sitä, kunnes se, mitä me haluamme sen tehdä.
Kuulostaako tämä tutulta? Toisaalta, Kehittäjät näinä päivinä ovat hyvin tuttuja virtuaalinen DOM kirjastot ja he tuntevat templating., Eikö ole järkevämpää hyödyntää noita taitoja kuin ottaa käyttöön kirjasto, joka vaatii täysin toisenlaista ajattelutapaa?
Se on helpompaa kuin luulet
Kun ensin miettiä, luoda omia kaavioita tyhjästä, se on yhteinen tuntea huolissaan ja kauhuissaan. Se voi kuulostaa hyvin monimutkainen komponentti luoda,mutta se ei todellakaan ole, kun hajottaa sen. Otetaan esimerkki viivakaaviosta. Näin teet viivakaavion D3: ssa:
lähde: bl.ocks.,org –
Tässä on, miten haluan tehdä jotain tällaista käyttämällä Preact:
Ja CSS:
Lähde: JSFiddle
Siellä on melko vähän koodia, mutta olen vain käyttää työkaluja jo käytettävissäni, tässä tapauksessa, mielestäni kirjasto, joka on Preact (voi olla mitä tahansa, vaikka, Reagoida, Vue, Kulma jne), ja moderni CSS-työkaluja, kuten flexbox.,
D3-esimerkki vaatii monien käsitteiden opettelua D3: sta. Jälkimmäinen edellyttää vain, että käytät jo olemassa olevaa tietoa Kuvakirjastostasi. Väittäisin, että se on helpompi ylläpitää kuin D3 esimerkki, koska kuka tahansa tietää, näkymä kirjaston pitäisi pystyä hypätä koodi pohja ja alkaa tehdä muutoksia.
Älä unohda nippu koko
Riippuen kuvio ja kuinka paljon puu-tärinä voi optimoida nippu, D3 pahimmillaan tulee tuoda 70+ KB koodia. Tällä voi olla vaikutuksia sivustosi lataamiseen., Joten vaikka on totta, että kirjoitat enemmän koodia kuin alkuperäinen D3 esimerkki, yleisesti olet jakamassa vähemmän koodia kuin jos olisit käyttänyt D3.
yleensä kolmannen osapuolen koodia käytettäessä on aina tärkeää muistaa kyseisen koodin käytöstä aiheutuvat kustannukset. Jos tarvitset vain yhden toiminnon kirjastosta, voisitko tuoda koko kirjaston, että toiminnallisuus?, Kyllä, sinun pitäisi aina keksiä pyörää uudelleen, mutta sinun täytyy harkita aika oppia, että kirjaston, koko se lisää teidän nippu, lisenssin, että kirjasto -, tuki -, että kirjasto on, luotettavuutta ylläpitäjille, kyky korjata vikoja, oikea-aikaisesti, jne.
Kangas ja HTML ovat usein parempia kuin SVG
Jos olet huomannut, että esimerkiksi aikaisemmin käytimme yhdistelmä HTML ja SVG. Jostain syystä ihmiset yrittävät toteuttaa kokonaisia kaavioita SVGs: n avulla, mutta ei todellakaan ole tarvetta. CSS on nykyään paljon SVG: tä tehokkaampi.,
esimerkiksi, SVG ei natiivisti tue tekstin rivitys. Jos halusimme tehdä teksti-kääre, meidän olisi pitänyt laskea sitä JavaScript:
Lähde: bl.ocks.org
HTML toisaalta, niin kauan kuin white-space on asetettu normal, se vain kääri luonnollisesti.
elementit, kuten ympyrät ja suorakulmiot, voidaan tehdä HTML-ja CSS-muodossa. Voit käyttää transform ja border-radius luoda kaikenlaisia muotoja., Jos halusi tehdä pylväsdiagrammi D3 kaksi pyöristetyt kulmat, et voisi käyttää rect koska se on pyöreä, kaikki neljä kulmat, sen sijaan, että kaksi kulmat halusit kierroksella. Ainoa vaihtoehto olisi käyttää path.
ainoa syy, miksi haluaisin käyttää SVG-tagit, on koska path – tagin. Se on silti ainoa puhdas tapa luoda mielivaltaisia muotoja ilman HTML-vastinetta.
Jos tarvitset lisää suorituskykyä, on myös canvas – tagin harkita., Kankaalle sinun täytyy koodi perus vuorovaikutus itse, mutta se tulee hyötyä ei ole yläpuolella HTML-tai SVG, joka voi kuluttaa muistia ja on hitaampi päivittää. Voit päivittää yksittäisiä pikseleitä kankaalle miten haluat, joten voit optimoida visualisoinnin ja skaalata sen. Uudet selainapit, kuten OffscreenCanvas, auttavat myös parantamaan suorituskykyä, kun niitä käytetään työntekijöiden sisällä.
mutta kangas ei skaalaudu SVG: n tapaan?,
– hyvin yleinen asia, että olen kuullut melko usein, on se, että kangas ei sovellu visualisointeja, koska se ei mittakaavassa sekä SVG. Normaalissa kankaan käytössä, jos zoomaat tai zoomaat sivulta tai käytät selainta, jonka korkeampi DPI-näyttö, kankaalle tulee pikselöity ja epäselvä.
Tämä tapahtuu, koska kun luot kankaalle, sinun täytyy määrittää, kuinka monta pikseliä haluat kankaalle piirtää., Kun me asettaa määritteitä width ja height se voi näyttää siltä, että olemme asettaminen CSS-kokoa, mutta olemme itse asiassa asettaa koko kankaalle piirustus tilaa. Nämä eivät ole sama asia.
Normaalisti CSS pixels olisi saman kokoinen kuin teidän kankaalle piirustus tilaa, mutta kun zoom in/out kanssa selain, voit nähdä sama asia uudelleen. Ratkaisu on käyttää window.devicePixelRatio ja skaalata piirustus kankaalle tilaa.
Lähde: JSFiddle
Käyttäen pikselin suhde, voimme lisätä piirustukseen tilaa kankaalle. Mutta lisää piirustuksen tilaa ei ole tarpeeksi, meidän täytyy myös kertoa kankaalle, että tulevaisuudessa piirustus toiminta on skaalattu pikselin suhde. Tämä ratkaisee sitten kaikki skaalausongelmat.,
osaatko sanoa, mitkä ovat kankaalle ja mitkä SVG: lle?
Johtopäätös
Kuten näette, siellä on lukuisia syitä siihen, miksi D3 on melko vanhentunut nyt monia yhteisiä käyttötapauksia. Verkko on kehittynyt merkittävästi julkaisunsa jälkeen., Jos teet yksinkertaisia kaavioita, kuten donuts, bar kaavioita, line kaavioita, scatter tontteja, jne, harkitse, jos voit toteuttaa niitä käyttämällä nykyisiä puitteita. Ei ole mitään, että D3 antaa sinulle niitä käyttötapauksia. Suhteen ylläpito, koodi on todennäköisesti enemmän huollettavia sijaan vaikeampaa ylläpitää, ja jos sinun täytyy tehdä mitään muutoksia, se olisi triviaali tehdä näitä muutoksia.
tuotepäälliköillä ei ole syytä olla huolissaan siitä, ettei D3: A käytetä, eikä sinunkaan pitäisi olla huolissaan.
Kiitos lukemisesta!,
Päivitykset
- Artikkeli päivitetty lisätä ”Mutta Kangas ei ole mittakaavassa, kuten SVG?” osa.