Sisu
- 01. D3.js
- 02. Chart.js
- 03. Chartist
- 04. Britecharts
- 05. Taucharts
- 06. Kaks.js
- 07. Pts.js
- 08. Anime.js
- 09. PixiJS
- 10. Zdog
- 11. Snap.svg
Javascripti raamistikud võivad täita paljusid funktsioone. Siinkohal vaatleme mõnda teeki, mis aitavad teil luua hämmastavat graafikat.
Brauser pakub mitmeid suure võimsusega joonistamise API-sid ja pindu. Kõige tähelepanuväärsemad on lõuendi element ja skaleeritav vektorgraafika (SVG). Mõlemad need funktsioonid on nüüd saadaval peaaegu kõigis laua- ja mobiilibrauserites, kuid nende kasutamiseks vajalikud API-d on üsna madalad ja "madal" tähendab tavaliselt lihtsate asjade tegemiseks palju tüütut ja üleliigset koodi.
Kuna tüütu ja üleliigse koodi kirjutamine pole nimekirjas, mida arendajad tavaliselt naudivad, isegi parimate koodiredaktorite ja parimate programmeerimiseks mõeldud sülearvutite korral, on õnneks saadaval mitu teeki, mis aitavad teil kõigi brauseri joonistamisnõuete täitmisel.
Selles artiklis vaatleme mõningaid saadaolevaid võimalusi. Uurime kõige populaarsemaid JavaScripti teeke ja räägime nende tugevustest ja nõrkustest. Samuti teeme natuke spetsifikatsiooni vähem tuntud projektidele, mis täidavad väga huvitavaid nišivajadusi - selliseid, mida te ei tea, et vajate, kuni neid vajate. Alustades nullist? Proovige tipp-veebisaidi koostajat ja kaaluge, milline veebimajutusteenus teile sobib.
01. D3.js
D3.js on JavaScripti graafikakogude suur ülemus. Npm-l on üle miljoni iganädalase allalaadimise, mis on tõenäoliselt kõigi graafikakogude seas kõige tuntum ja laialdasemalt kasutatav. Sellel on isegi oma Vikipeedia leht. Ja olgem ausad, kas pole see siis, kui teate, et olete suure aja saavutanud?
D3 võimaldab teil luua mis tahes tüüpi andmete visualiseeringuid. Võimaluste maailma nägemiseks peate piiluma ainult selle näidete lehel. Veelgi parem, külastage Shirley Wu interaktiivset visualiseerimist muusikalis Hamilton iga rea kohta, kui soovite tõesti oma meelt puhuda.
D3 on kõikehõlmav tööriist. Sellel on oma DOM-i valik, AJAX-võimalused ja isegi patenteeritud juhuslike arvude generaator. Iga D3 komponent on oma sõlme moodul, mis tuleb importida. Näiteks nimetatakse valikumoodulit d3-valik. Samuti on olemas moodulid massiivide, kujundite, värvide, pukseerimise, aja ja palju muu jaoks.
D3 jõud kaasneb keerukuse kompromissiga. Õppimiskõver võib olla järsk ja kood võib endiselt verbose tunduda. Ehitades midagi nii lihtsat nagu tulpdiagramm, peate käsitsi kokku panema telje, skaalad, puugid ja isegi joonistama ristkülikud, mis ribasid tähistavad. Arendajad kurdavad sageli madala taseme mõistmise üle, mis on vajalik D3-ga tõhusaks kasutamiseks.
Seda suuresti seetõttu, et keerukate andmete visualiseerimise loomine eeldab loodava visualiseerimise madalat mõistmist. D3 pole eelküpsetatud edetabelite jaoks parim variant. Selleks on mitu muud valikut, mis leiavad teid edukuse auku palju kiiremini.
D3 on võimeline renderdama lõuendile ja SVG-le. Kuid D3 tõeline maagia seisneb selles, et ta suudab andmeid seostada loodud graafikaga. Mõelge diagrammile, mis muutub sissetulevate andmete muutudes. SVG-ga on iga graafiline üksus eraldi element, mida saab valida ja värskendada. Lõuendi puhul pole see võimalik ja kuna D3 on põhiliselt andmete visualiseerimise toide, on SVG tavaliselt eelistatud väljundvorming.
02. Chart.js
Chart.js on avatud lähtekoodiga projekt usaldusväärsete diagrammide koostamiseks JavaScripti abil. Suur erinevus Chart.js ja D3 vahel on see, et kuigi D3 abil saate luua peaaegu kõike, piirab Chart.js teid kaheksa eelnevalt koostatud diagrammitüübiga: joon, riba, pirukas, polaar, mull, hajumine, ala ja segatüüp. Kuigi see näib piiravat, muudab see Chart.js-i alustamise lihtsamaks. See kehtib eriti nende kohta, kes ei ole andmete eksperdid, kuid teavad oma teed põhitabelis.
Süntaks on üles ehitatud diagrammitüübi ümber. Te lähtestate uue diagrammi olemasoleval lõuendi elemendil, määrate diagrammi tüübi ja seejärel diagrammivalikud. Chart.js renderdatakse ainult lõuendile. See pole probleem, kuna kõik kaasaegsed brauserid toetavad HTML-lõuendi elementi, kuid see võib olla hangup arendajatele, kellel on SVG-toe nõuded.
See tähendab ka, et olete piiratud võimalike animatsioonidega. Chart.js toetab kõiki lihtsustavaid võrrandeid ja animatsioonid määratakse ühe atribuudiseadega. Ehkki see muudab animeeritud diagrammi hankimise kiireks ja lihtsaks, takistab üksikute SVG-elementide puudumine CSS3 üleminekute ja animatsioonide abil keerukate animatsioonide tegemist.
Erinevalt D3-st ei ole Chart.js modulaarne, nii et kõigi funktsioonide ja diagrammitüüpide toe saamiseks on vaja ainult ühte JavaScripti kaasamist. See hõlbustab alustamist, kuid tähendab, et teie varad võivad olla palju suuremad. See kehtib eriti siis, kui vajate ajatelgi - Chart.js nõuab siis Moment.js-i, mis on ~ 51 kb minimeeritud ja lukustatud. Diagrammi Chart.js abil on palju lihtsam luua tulpdiagrammi kui D3-ga. Siiski on lihtsusega kaasnev lagi. Võib juhtuda, et olete karbist välja jõudnud, kui palju see toimib. Sageli alustavad arendajad sellist lahendust nagu Chart.js ja astuvad seejärel D3-le.
Kui Chart.js lihtsus teile meeldib, võib järgmine valik teile meeldida: Chartist.
03. Chartist
Chartisti eesmärk on olla lihtne, sujuv graafikute kogu, mis on väikese suurusega ja millega on lihtne alustada. Samuti on see loodud vaikimisi reageerivaks. See on suurem asi, kui see kõlab, kuna sellised raamistikud nagu D3 ei suurenda diagrammide suurust automaatselt, vaid nõuavad, et arendaja ühendaks end sündmustega ja joonistaks graafikat ümber.
Chartist on ka väike võrreldes Chart.js-ga. See kaalub vaid 10KB ilma sõltuvusteta. Põhjuseks võib olla see, et see pakub ainult kolme diagrammitüüpi: joon, riba ja pirukas. Nendes tüüpides on variatsioone (st hajutusdiagramm on Chartistis joontüüp), kuid väiksele suurusele ja seadistamise lihtsusele aitab vastu kastiväliste diagrammitüüpide puudumine.
Chartist renderdab lõuendi asemel SVG-le, muutes selle välimuse ja olemuse osas palju kohandatavamaks, võimaldades interaktiivsuse ja animatsioonide üle palju suuremat kontrolli. Lõuendile juurdepääsu renderdamata jätmine tähendab, et teil võib olla raskem teatud toiminguid teha. Näiteks on olemas lõuendi kujutiseks renderdamise API (toDataURI). SVG-s seda võimalust pole, nii et diagrammi eksportimine pildina osutub palju keerulisemaks. Ideaalses maailmas on teil võimalus renderdada mõlemas režiimis.
Chartisti graafikuid on lihtsam seadistada kui Chart.js, kuna valikuid on vähem. Kuigi neid graafikuid on võimalik laiendada üsna vähese funktsionaalsusega, tähendab nende keskendumine lihtsusele, et need on definitsiooni järgi lihtsad. Chartist on suurepärane lahendus neile, kes vajavad graafiku põhilahendust. Diagramme on oma olemuselt raske konfigureerida, kuna need nõuavad mingisuguseid teadmisi andmete seadistamise kohta mööda teatud telge ja teatud viisil rühmitatuna. Chartist muudab graafiku koostamise osa võimalikult lihtsaks, kuid võite leida, et vajate võimsamat lahendust, kui olete graafikute loomisel mugavam.
Chartist loetleb ka avatud lähtekoodiga raamistiku tuge, sealhulgas React ja Angular. Selle saidil pole mainitud Vue paketti.
04. Britecharts
Britecharts on graafikute kogu, mis ümbritseb D3. Selle tegi Eventbrite, kes hankis seejärel projekti lubava Apache V2 litsentsi all.
See pakub väga minimaalset, kuid esteetiliselt meeldivat graafikute komplekti. Kuigi vanill D3 abil tulpdiagrammi loomine võib olla üsna suur ülesanne, muudab Britechartsi pakkimine sama lihtsaks kui uue barChart objekti loomine ning seejärel selle laiuse ja kõrguse seadmine.
barChart.width (500) .thight (500);
Britecharts toetab kõiki põhilisi diagrammitüüpe: joon, riba, sõõrik, täpp, hajutamisgraafik, säde ja samm, mis on rohkem kui need, mida pakuvad sellised raamatukogud nagu Chartist. See pakub ka põhilisi tööriistavihje ja muistendi funktsionaalsust. Diagrammide animatsioonid on sisseehitatud ja Eventbrite on pakkunud ilusaid värvilahendusi.
Lõppkokkuvõttes on Britecharts suurepärane võimalus kaardistamise põhifunktsioonide jaoks. Konfiguratsiooniobjektid on üsna lihtsad ja D3 võimsuse saate ikkagi kaante all, ilma et peaksite midagi teadma D3 enda kohta. Paljud arendajad leiavad, et see on veenvam variant kui lihtsalt täieliku diagrammi loomine algusest peale koos D3-ga.
See keskendub ka D3 andmetega seotud aspektidele, muutes selle üsna heaks diagrammide jaoks, mis peavad muutuma alusandmete muutumisel. Ehkki saadaval olevates tüüpides on see mõnevõrra piirav, on sellel ka põhitabeli tüüp, mida saate laiendada, et luua uusi omaenda diagrammitüüpe.
05. Taucharts
Taucharts on veel üks kaardilahendus, mis ühendab D3 keerukuse hõlpsasti rakendatavas API-s. See on üles ehitatud autor Leland Wilkinsoni raamatu The Grammar of Graphics mõistetele. See annab mõista, millal ja kuidas kasutada andmete visualiseerimist erinevate andmete kuvamiseks.
Karbist väljas on sellel joone-, riba-, hajutus-, ala- ja tahkdiagrammid. Siiski rakendab see kontseptsioone raamatust „Grammar of Graphics” keeles „Taucharts Language”, mis pakub raamistiku oma andmete visualiseerimise rakendamiseks.
Taucharts näeb välja üsna veenev ja asjaolu, et see on ehitatud D3-le, muudab selle atraktiivseks ja võimsaks võimaluseks. Siiski on tunne, et arendaja peab oma jõu täielikuks ärakasutamiseks lugema ka graafika grammatikat.
Siiani oleme käsitlenud ainult diagrammide koostamist ja andmete visualiseerimist. Seda seetõttu, et graafikute joonistamine on brauseri graafikakogu kõige tavalisem kasutusvõimalus. Kuid see pole sugugi ainus. Teine üsna levinud graafika stsenaarium on loomulikult animatsioon.
06. Kaks.js
Seda ei tohi segi ajada D3.js-ga, aga two.js on avatud lähtekoodiga JavaScripti teek kahemõõtmeliste joonistuste jaoks veebis. Samuti on see võimalik sihtida kõiki kolme graafikavõimalust tänapäevastes brauserites: SVG, Canvas ja WebGL.
Two.js on mõnevõrra sarnane D3-le, kuna see on rangelt keskendunud joonistamisele ja sellel pole eelküpsetatud diagramme ega interaktiivseid struktuure, mille vahel valida. See tähendab, et nagu ka D3, on teil vaja arusaamist sellest, millist tüüpi joonist proovite teha ja kuidas seda saavutada konstruktsioonidega, mida two.js pakub. Ringi joonistamine on üsna lihtne. Detailse animatsiooni ülesehitamine on seevastu palju keerulisem ettevõtmine. Two.js abstrakteerib ainult jooniste kujundite unet, mitte üldise joonise tüübi.
Samuti jälgib Two.js kõiki teie loodud objekte, nii et saate neile igal ajal viidata ja animeerida. See on eriti oluline, kui tegelete mängude arendamisega ja teil on vara, mida tuleb jälgida näiteks kokkupõrke tuvastamiseks. Sellel on sisseehitatud animatsioonisilmus, mis vabastab teid animatsiooniraamide pärast muretsemisest ja hõlbustab animatsiooniteeki, näiteks GreenSocki, sidumist.
Kuigi two.js on võimas, võib selle vabas vormis olemus jätta mõne arendaja kindel, kuidas alustada, ja see on pigem nišivahend 2D joonistamiseks ja animatsiooniks. Teine suurepärane võimalus on pts.js.
07. Pts.js
Pts on ka kahemõõtmeline joonistusteek. Kuid see erineb põhimõtteliselt two.js-st, kuna jooniste ja animatsioonide kokkupanekuks kasutatakse eelnevalt kindlaksmääratud metoodikat: ruum, vorm ja punkt. Analoogia, mida selle arendajad selle selgitamiseks kasutavad, pärineb füüsilisest maailmast. Kosmos on paber. Vorm on pliiats. Ja punkt on teie idee.
Selle rakendamise osas on ruum lõuendi element. Kui lõuendi element on loodud, saate sellele mängijaid lisada. Need võivad olla kas funktsioonid või objektid. Need funktsioonid ja objektid peavad vastama ruumi eelnevalt määratletud liidesele. Pts on ehitatud TypeScriptile, nii et pole vaja arvata, mis need on, kuna teie kasutatavad tööriistad soovitavad tõenäoliselt neid, kellel on automaatne täitmine.
Näiteks tühikul on algusfunktsioon, mille saate määrata. See on kood, mida käivitatakse siis, kui ruum on valmis. Nendes funktsioonides toimub ruumi tõmbamine vormiobjekti abil. Vormiobjektid võivad joonistada mis tahes kuju ja punkt on koht, kus need üksused ruumis asuvad.
Näib, et punktid on mõeldud peamiselt interaktiivsete visuaalide ja animatsioonide loomiseks. Selle rakendamine on huvitav, ehkki üsna abstraktne. Arendajatel võib olla keeruline mõista ruumi, vormi, punkti mudelit, mida Pts nõuab. See on veel üks vaimne tõke, mis tuleb lahendada lisaks lihtsalt kujundite joonistamisele ja animeerimisele.
08. Anime.js
Anime.js on peamiselt animatsioonikogu. Sellel on sisseehitatud järkjärguline süsteem, et lihtsustada keerukate animatsioonide olemasolu, mis kattuvad või sõltuvad mõne muu täitmise esinemisest. On tavaline, et animatsioonid ajastatakse koos või käivitatakse üksteise poolt. Hämmastav süsteem muudab selle rakendamise lihtsamaks, kuna see aitab vabastada mõningaid üldkulusid lehel toimuva jälgimisest ja animatsiooni ajastuse käsitsi konfigureerimisest.
Erinevalt seni käsitletud joonistusteekidest pole anime.js-il API-sid kujundite joonistamiseks. Selle asemel eeldatakse, et teie kujundid on juba olemas ja soovite neid animeerida. See muudab selle suurepäraseks kasutamiseks raamatukogudes, näiteks two.js. Anime.js toetab CSS-i omaduste, SVG, DOM-i ja isegi JavaScripti objektide animeerimist.
Anime.js on hea võimalus olemasolevate jooniste animeerimiseks ja tõenäoliselt ühendatakse see muu teegiga. Seda tuleks pidada alternatiiviks millelegi sarnasele GreenSockile ega asendada teisi joonistusteegi. Anime.js-i kasutatakse tõenäoliselt keerukamate animatsioonide jaoks, mis peavad toimuma interaktiivse veebikogemuse osana.
09. PixiJS
PixiJS on teine 2D joonistusteek. Selle peamine eesmärk on muuta 2D-graafika kuvamine, animeerimine ja haldamine lihtsamaks, nii et saate keskenduda oma kogemuse või mängu loomisele, muretsemata kõigi joonistatavate ja animeeritud kujundite ja piltide pidamise pärast. Kui loote mängu, saavad varad (või spritid) kiiresti üle viia numbrini, mida on raske hallata. (Palju varusid, mida säästa? Hoidke neid kõige usaldusväärsemas pilvemälus.)
PixiJSi veenev aspekt on see, et see pärineb API-st, mis ehitati ja kasutati laialdaselt Adobe Flashis. See on Flash-taustaga arendajatele tohutu eelis, kuna kogemus tundub tuttav.See sarnaneb ka Apple'i SpriteKitiga.
PixiJS ei ole mängumootor, nii et kui kasutate seda mängude jaoks, ei leia tööriistu ega füüsikat näiteks kokkupõrke tuvastamiseks. Kui tunnete end kartmatult, peate selle pakkima tegelikku mängumootorisse või enda ehitatud mootorisse.
PixiJS renderdab WebGL-i. WebGL on mootor GPU-ga kiirendatud graafika tegemiseks brauseris. See tähendab, et see on kasulik animatsioonide ja graafika jaoks, mis kasutavad palju süsteemiressursse ja toimiksid kõige paremini, kui need renderdatakse diskreetse graafikaprotsessori (GPU) abil. See põhineb OpenGL-il, mis on mängude ja 3D-graafikaprogrammide käitamiseks töölaua ekvivalent. Kapoti all kasutab WebGL HTML lõuendi elementi.
Tõsised graafikaarendajad hindavad WebGL-i jõudu. Väiksema võimsusega masinatel võivad need kogemused siiski halveneda. Isegi kui ma seda artiklit kokku panin, põhjustasid paljud PixiJS-i demod minu süsteemis märgatava aeglustumise, millel puuduvad keerukate graafikute ja animatsioonide jaoks vajalikud kõrgema klassi võimalused.
10. Zdog
Enamik joonistamismootoreid, mida oleme seni arutanud, on kahemõõtmelised. Selle põhjuseks on asjaolu, et enamik meie ekraaniga suhtlemisest toimub kahes mõõtmes - piki X- ja Y-telge. Kolmemõõtmelised joonised ja animatsioonid on tavaliselt palju keerukamad.
Zdog on raamatukogu pseudo-3D-kogemuste loomiseks, mis on enamasti tasase iseloomuga. Seda nimetatakse pseudo-3D-ks, sest kuigi see kontseptualiseerib oma joonised 3D-ruumis, muudab ta need lamedate kujunditena. See kasutab visuaalseid trikke 2D-objektide 3D-iliseks muutmiseks. Mõju on tõesti huvitav. Animatsiooni vaadates näeb see välja täiesti kolmemõõtmeline, kuid ekraanipildi tegemisel on see selgelt tasane pilt. Siin on üks näide: pöörlev Mario demo.
Kuna renderdused on 2D-d, saab Zdog renderdada kas Canvasile või SVG-le. Zdog on fantastiline võimalus 3D-animatsioonidele lihtsatel objektidel - eriti kui need varad sisaldavad lamekujunduse aspekte. Arendajad, kes soovivad 3D-animatsiooni, kuid ei taha takerduda 3D-graafikamootorite keerulisse maailma, võivad leida Zdogile piisava lahenduse. Lisaks sellele, et keskenduda lamedatele piltidele, saab Zdog endale lubada palju lihtsamat liidest ja palju suuremat jõudlust, kui oleks vaja keeruliste graafiliste piltide 3D-renderdamiseks.
Sellel ei ole mängumootori elemente nagu varahaldus ja kokkupõrgete tuvastamine, seega tuleks see pakkida mängumootorisse või need kaalutlused tuleks käsitsi hoolitseda. See tähendab, et Zdog sobib ilmselt kõige paremini eraldatud 3D-animatsioonide jaoks maandumislehtedel.
11. Snap.svg
Snap.svg ütleb, et see muudab "oma SVG-varadega töötamise sama lihtsaks kui jQuery muudab DOM-iga töötamise". Võimalik, et võite jQuery viite põhjal öelda, et Snap.svg on natuke vanem, kuid selle API tundub sama lihtne kui jQuery ja see on üsna võimas asi.
Snap.svg-l on põhiline SVG-elemendi valimiseks ja seejärel sellele elementide joonistamiseks puhas ja lihtne API. See sobib kõige paremini arendajatele, kes otsivad kiiret lahendust SVG-de animeerimiseks. See on eriti hea võimalus, kui teie animatsioonid on lihtsad ja teil pole animatsioonimootorite kohta palju teadmisi. Kuigi see on mõnevõrra dateeritud, ei tohiks seda kindlasti tähelepanuta jätta, sest see võib olla kõige lihtsam viis oma SVG-dega töötamiseks.
Snap.svg on värskendav oma lihtsuses. See hõlmab SVG-de valimise ja nendega töötamise tööd ning ei püüa sellest rohkemat olla. Snapi saab SVG-de joonistamiseks ja renderdamiseks kombineerida siin teiste graafikakogudega. Samuti on hea, kui teil on olemasolevad SVG-d ja soovite lihtsat viisi nendega töötada.
See artikkel ilmus algselt netiajakirjas.
