Minden alkalommal, amikor dolgozom egy projekten, a vizualizáció, projekt menedzserek általában a horror, amikor azt mondom, hogy nem használom D3. Miért van aggodalom? Miért döntenék úgy, hogy nem használom a D3-at?
ezeknek a kérdéseknek a megválaszolásakor meg kell értenünk azt a kontextust, amelyben a D3 létrejött., A D3 először 2011-ben jelent meg, és akkor még meglehetősen innovatív volt.
általában mit látna, a könyvtárak, amelyek grafikonok ki a dobozból, és egy hatalmas listát a lehetőségek. Ez működhet, de a probléma az, hogy minden alkalommal, amikor valakinek új követelménye van, egy lehetőséget hozzá kell adni és támogatni kell. Végül akkor a végén, amit hatékonyan egy nyelvet, ahol használja több objektumot, hogy meghatározza a grafikon. A D3 más megközelítést alkalmazott, ahelyett, hogy megadta volna a teljes komponenseket, adatvezérelt segítő funkciókat ad Önnek, hogy ezeket az összetevőket saját maga hozza létre.,
ekkoriban népszerűek voltak az olyan könyvtárak, mint a jQuery és a gerinchálózat. Saját grafikonok létrehozása ezekkel a könyvtárakkal kihívást jelentett volna, különösen, ha azt akarja, hogy dinamikusak legyenek. A böngészők csak új, modern CSS szabványokat fogadtak el, mint például a transitions, a modernebb tulajdonságok, mint például a flex box, még mindig korúak voltak a megvalósítástól.
A D3 sok ilyen problémát megoldott, és kétségtelenül ez volt a legegyszerűbb megközelítés a vizualizációk megvalósítására. Azóta azonban sok minden megváltozott., Új, modern keretrendszereink vannak, amelyek rugalmasabb és kifejezőbb fogalmakat használnak, mint például a virtuális DOM, és a CSS-nek annyi új képessége van az elrendezéshez és az animációkhoz.
ahelyett, hogy automatikusan D3-ra ugrik, hadd soroljak fel néhány okot arra vonatkozóan, hogy miért kell újra megfontolnia annak használatát.
az elmúlt években többször dolgoztam a D3-mal, és mindenféle vizualizációt megvalósítottam vele. Megértem az általános fogalmakat a D3-ról, és még mindig küzdök vele dolgozni. Mindenki, akivel együtt dolgoztam, a junioroktól a vezető fejlesztőkig, szintén küzd vele., Sok ember, köztük én is, az, hogy találunk egy példát az interneten, amely nagyjából megegyezik azzal, amit keresünk, és módosítjuk a példát, hogy megfeleljen az igényeinknek.
Ha hozzá akarunk adni néhány egyéni funkciót, akkor valószínűleg még több keresést fogunk végezni, és találunk valamit, ami helyesnek tűnik, megpróbáljuk megérteni, hogyan működik, és addig módosítjuk, amíg meg nem teszi azt, amit akarunk.
ismerősen hangzik? Másrészt a fejlesztők manapság nagyon ismerik a virtuális DOM könyvtárakat, és ismerik a sablonokat., Nincs több értelme, hogy kihasználja ezeket a készségeket, ahelyett, hogy egy könyvtárat vezetne be, amely teljesen más gondolkodásmódot igényel?
könnyebb, mint gondolnád
amikor először gondolkodsz a saját diagramok létrehozásán a semmiből, gyakori, hogy aggódsz és rettegsz. Úgy hangzik, mint egy nagyon bonyolult összetevő létrehozása,de ez tényleg nem, ha lebontják. Vegyünk egy példát egy vonaldiagramra. Itt van, hogyan tennél egy vonaldiagramot D3:
Forrás: bl.ocks.,org
itt van, hogyan csinálnék ilyesmit a Preact használatával:
és a CSS:
Forrás: JSFiddle
van egy kis kód, de csak a rendelkezésemre álló eszközöket használom, ebben az esetben a nézetkönyvtár, amely preact (bármi lehet, reagálhat, vue, szögletes stb.), és modern CSS eszközök, mint a flexbox.,
A D3 példa sok fogalmat igényel a D3-ról. Ez utóbbi csak olyan ismereteket igényel, amelyek már rendelkeznek a nézetkönyvtárral kapcsolatban. Azt állítanám, hogy könnyebb fenntartani, mint a D3 példa, mint bárki, aki ismeri a nézet könyvtár képesnek kell lennie arra, hogy ugrik be a kódbázis, és elkezd módosításokat.
ne feledkezzünk meg a csomag mérete
attól függően, hogy milyen típusú diagram, valamint hogy mennyi fa-Rázás optimalizálja a csomag, D3 legrosszabb esetben lesz importáló 70 + KB kód. Ez hatással lehet A webhely betöltésére., Tehát bár igaz, hogy több kódot írsz, mint az eredeti D3 példa, összességében kevesebb kódot terjesztesz, mint ha D3-at használtál volna.
általában harmadik fél kódjának használatakor mindig fontos megjegyezni a kód használatának költségeit. Ha csak egyetlen funkcióra van szüksége egy könyvtárból, importálná a teljes könyvtárat ehhez a funkcióhoz?, Igen, nem mindig szabad újra feltalálnia a kereket, de figyelembe kell vennie az időt arra, hogy megtanulja ezt a könyvtárat, a csomaghoz hozzáadott méretet, a könyvtár engedélyét, a könyvtár támogatását, a karbantartók megbízhatóságát, a hibák időben történő kijavításának képességét stb.
A vászon és a HTML gyakran jobb, mint az SVG
Ha korábban észrevetted a példában, HTML és SVG kombinációt használtunk. Valamilyen oknál fogva, az emberek megpróbálják végrehajtani a teljes grafikonok segítségével SVGs, de tényleg nincs szükség. CSS sokkal erősebb, mint SVG manapság.,
például az SVG nem támogatja natív módon a szövegcsomagolást. Ha szöveget akarunk csomagolni, akkor JavaScript-ben kell kiszámolnunk:
Forrás: bl.ocks.org
A HTML viszont, amíg white-spacevan beállítva, hogy normal, akkor csak csomagolja természetesen.
elemek, például körök és téglalapok HTML-ben és CSS-ben is elvégezhetők. Atransform ésborder-radius különböző alakzatok létrehozásához használhatja., Ha egy D3-as sávdiagramot akart csinálni két lekerekített sarkokkal, akkor nem tudta használni a rect – ot, mert mind a négy sarkot kerekíti, a kerekíteni kívánt két sarok helyett. Az egyetlen lehetőség a pathhasználata.
az egyetlen ok, amiért SVG címkéket használnék, a path címke miatt van. Ez még mindig az egyetlen tiszta módja annak, hogy tetszőleges alakzatokat hozzon létre HTML-ekvivalens nélkül.
ha extra teljesítményre van szüksége, akkor a canvas címkét is figyelembe kell venni., A canvas használatával Önnek kell kódolnia az alapvető interakciókat, de azzal az előnnyel jár, hogy nem rendelkezik a HTML vagy az SVG fölött, amely memóriát fogyaszthat, és lassabb lehet A frissítés. Az egyes képpontokat a vásznon tetszés szerint frissítheti, így optimalizálhatja a megjelenítést és méretezheti azt. Az új böngésző API-k, mint például az OffscreenCanvas, szintén segítenek a teljesítmény növelésében, ha a munkavállalókon belül használják.
de a Canvas nem méretezhető, mint az SVG?,
egy nagyon gyakori dolog, amit gyakran hallottam, az, hogy a vászon nem alkalmas vizualizációkra, mert nem skálázik olyan jól, mint az SVG. A vászon normál használata esetén, ha nagyít vagy kicsinyít egy oldalt, vagy olyan böngészőt használ, amely magasabb DPI kijelzővel rendelkezik, akkor a vászon pixelezett és elmosódott lesz.
Ez azért történik, mert a vászon létrehozásakor meg kell határoznia, hogy hány képpontot szeretne rajzolni a vászonra., Amikor beállítjuk a width és height attribútumokat, úgy tűnhet, hogy beállítjuk a CSS méretét, de valójában beállítjuk a vászon rajzterület méretét. Ezek nem ugyanazok.
általában a CSS képpontjai ugyanolyan méretűek lesznek, mint a vászon rajzterülete, de amikor a böngészővel nagyít/kicsinyít, újra ugyanazt a problémát fogja látni. A megoldás awindow.devicePixelRatio használata, valamint a vászon rajzterületének méretezése.
Forrás: JSFiddle
a képpontarány használatával növelhetjük a vászon rajzterületét. De a rajzterület növelése nem elegendő, azt is el kell mondanunk a vászonnak, hogy a jövőbeli rajzműveleteket a pixel arányra kell méretezni. Ez megoldja az összes méretezési problémát.,
meg tudja mondani, melyik vászon, és melyik SVG?
következtetés
mint látható, számos oka van annak, hogy miért D3 meglehetősen elavult most sok gyakori használat esetén. A web megjelenése óta jelentősen fejlődött., Ha olyan egyszerű diagramokat készít, mint a fánk, a sávdiagramok, a vonaldiagramok, a scatter parcellák stb., fontolja meg, hogy végrehajtja-e azokat a meglévő keretrendszer segítségével. Nincs semmi igazán, hogy a D3 biztosítja az Ön számára ezeket a használati esetek. A karbantartási munka a kódot valószínűleg több karbantartható ahelyett, hogy több nehéz fenntartani, ha kell, változtatásokat kell triviális, hogy ezek a változások.
nincs ok arra, hogy a termékmenedzserek aggódjanak amiatt, hogy nem használják a D3-at, és önnek sem kellene aggódnia.
Köszönjük, hogy elolvasta!,
frissítések
- cikk frissítve a ” de a vászon nem méretezhető, mint az SVG?”szekció.