de Fiecare dată când lucrez la un proiect cu vizualizări, manageri de proiect, de obicei, reacționează în groază când spun că nu mă folosesc de D3. De ce există îngrijorare? De ce aș alege să nu folosesc D3?când răspundem la aceste întrebări, trebuie să înțelegem contextul în care a fost creat D3., D3 a fost lansat pentru prima dată în 2011 și a fost destul de inovator la acea vreme.
în mod normal, ceea ce ar vedea, este biblioteci care oferă grafice din cutie și cu o listă masivă de opțiuni. Acest lucru poate funcționa, dar problema este că de fiecare dată când cineva are o nouă cerință, o opțiune ar trebui adăugată și acceptată. În cele din urmă veți ajunge la ceea ce este efectiv o limbă în care utilizați mai multe obiecte pentru a defini un grafic. D3 a adoptat o abordare diferită, în loc să vă ofere componentele complete, vă oferă funcții de ajutor bazate pe date pentru a crea singuri aceste componente.,în acest moment, biblioteci precum jQuery și Backbone erau populare. Crearea propriilor grafice folosind aceste biblioteci ar fi fost o provocare, mai ales dacă doriți ca acestea să fie dinamice. Browserele adoptau doar noi standarde CSS moderne, cum ar fi tranzițiile, iar proprietățile mai moderne, cum ar fi flex box, erau încă departe de a fi implementate.
D3 A rezolvat multe dintre aceste probleme și a fost, fără îndoială, cea mai ușoară abordare a implementării vizualizărilor la acea vreme. Cu toate acestea, multe s-au schimbat de atunci., Avem noi cadre moderne care folosesc concepte mai flexibile și expresive, cum ar fi virtual DOM, iar CSS are atât de multe capabilități noi pentru aspect și animații.
în loc să sari automat la D3, permiteți-mi să enumăr câteva motive pentru care ar trebui să vă reconsiderați utilizarea acestuia.
am lucrat cu D3 de mai multe ori în ultimii ani și am implementat tot felul de vizualizări cu acesta. Înțeleg conceptele generale despre D3 și încă mă lupt să lucrez cu el. Toți cei cu care am lucrat, de la juniori la dezvoltatori seniori, se luptă și cu asta., Ceea ce fac mulți oameni, inclusiv eu, este că găsim un exemplu online care se potrivește aproximativ cu ceea ce căutăm și modificăm exemplul pentru a se potrivi nevoilor noastre.
dacă dorim să adăugăm unele funcționalități personalizate, probabil că vom face mai multe căutări și vom găsi ceva care pare corect, vom încerca să înțelegem cum funcționează și vom continua să îl modificăm până când face ceea ce vrem să facă.
acest sunet familiar? Pe de altă parte, dezvoltatorii în aceste zile sunt foarte familiarizați cu bibliotecile DOM virtuale și sunt familiarizați cu templarea., Nu are mai mult sens să folosim aceste abilități, mai degrabă decât să introducem o bibliotecă care necesită un mod complet diferit de gândire?
este mai ușor decât credeți
când vă gândiți mai întâi la crearea propriilor diagrame de la zero, este obișnuit să vă simțiți îngrijorați și îngroziți. S-ar putea suna ca o componentă foarte complicat pentru a crea, dar într-adevăr nu este atunci când îl rupe în jos. Să luăm un exemplu de diagramă linie. Iată cum ar face o diagramă linie în D3:
Sursa: bl.ocks.,org
Iată cum aș face ceva de genul asta, folosind Preact:
Și CSS:
Sursa: JSFiddle
Există destul de un pic de cod, dar eu sunt, folosind doar instrumentele deja la dispoziția mea, în acest caz, opinia mea bibliotecă care este Preact (poate fi orice, totuși, să Reacționeze, Vue, Unghiulare, etc), și modern CSS instrumente, cum ar fi flexbox.,exemplul D3 necesită învățarea multor concepte despre D3. Acesta din urmă necesită doar utilizarea cunoștințelor pe care le aveți deja despre biblioteca dvs. de vizualizare. Aș argumenta că este mai ușor de întreținut decât exemplul D3, deoarece oricine cunoaște biblioteca de vizualizare ar trebui să poată sări în baza de cod și să înceapă să facă modificări.
nu uitați de dimensiunea pachetului
în funcție de tipul de diagramă și de cât de mult poate optimiza pachetul dvs., D3 în cel mai rău caz va importa 70+ KB de cod. Acest lucru poate avea impact asupra încărcării site-ului dvs., Deci, deși este adevărat că scrieți Mai mult cod decât exemplul original D3, în general distribuiți mai puțin cod decât dacă ați fi folosit D3.
în general, atunci când utilizați un cod terț, este întotdeauna important să vă amintiți costurile utilizării acelui cod. Dacă aveți nevoie doar de o singură funcție dintr-o bibliotecă, ați importa întreaga bibliotecă pentru această funcționalitate?, Da, n-ar trebui să re-inventeze roata, dar trebuie să ia în considerare timpul de a învăța că, bibliotecă, dimensiunea se adaugă la pachet, permis de bibliotecă, sprijinul pe care biblioteca va avea, nivelul de încredere al administratorilor, capacitatea de a repara bug-uri în timp util, etc.
Canvas și HTML sunt adesea mai bune decât SVG
Dacă ați observat în exemplul anterior, am folosit o combinație de HTML și SVG. Din anumite motive, oamenii vor încerca să implementeze diagrame întregi folosind SVG-uri, dar nu este nevoie. CSS este mult mai puternic decât SVG în aceste zile.,
de exemplu, SVG nu acceptă în mod nativ împachetarea textului. Dacă am vrut să facem încadrare text, ar trebui să se calculeze în JavaScript:
Sursa: bl.ocks.org
HTML pe de altă parte, atâta timp cât white-space este setat la normal, se va încheia doar în mod natural.
elemente, cum ar fi cercuri și dreptunghiuri se poate face în HTML și CSS. Puteți folosi transform și border-radius pentru a crea tot felul de forme., Dacă ai vrut să facă o diagramă bară în D3 cu două colțuri rotunjite, n-ai putut folosi rect pentru că va rotunji toate cele patru colțuri, în loc de cele două colțuri ai vrut să rotund. Singura opțiune ar fi să folosiți path.
singurul motiv pentru care aș folosi etichete SVG este din cauza etichetei path. Este încă singura modalitate curată de a crea forme arbitrare fără echivalent HTML.
Dacă aveți nevoie de performanță suplimentară, există și eticheta canvas de luat în considerare., Cu canvas va trebui să codificați interacțiunile de bază, dar vine cu avantajul de a nu avea deasupra HTML sau SVG care pot consuma memorie și pot fi mai lent pentru actualizare. Puteți actualiza pixelii individuali de pe pânză oricum doriți, astfel încât să puteți optimiza vizualizarea și să o scalați. Noile API-uri ale browserului, cum ar fi OffscreenCanvas, vor contribui, de asemenea, la creșterea performanței atunci când sunt utilizate în interiorul lucrătorilor.
dar Canvas nu scalează ca SVG?,
un lucru foarte comun pe care l-am auzit destul de des, este că canvas nu este potrivit pentru vizualizări, deoarece nu scalează la fel de bine ca SVG. În condiții normale de utilizare a canvas, dacă măriți sau micșorați o pagină sau utilizați un browser cu un afișaj DPI mai mare, panza dvs. va ieși pixelată și neclară.acest lucru se întâmplă deoarece atunci când creați spațiul de lucru, trebuie să definiți cu câți pixeli doriți să deseneze spațiul de lucru., Când setăm atributele width și height poate părea că setăm dimensiunea CSS, dar de fapt setăm dimensiunea spațiului de desen al pânzei. Acestea nu sunt același lucru.
în mod Normal, CSS pixeli ar fi setate la aceeași dimensiune ca panza de desen spațiu, dar atunci când zoom in/out cu browser-ul dvs., veți vedea aceeași problemă din nou. Soluția este să utilizați window.devicePixelRatio și să scalați spațiul de desen al pânzei.
Sursa: JSFiddle
folosind raportul de pixeli, putem mări spațiul de desen pentru pânză. Dar creșterea spațiului de desen nu este suficientă, trebuie, de asemenea, să spunem pânzei că viitoarele operații de desen trebuie să fie scalate la raportul pixelilor. Acest lucru va rezolva apoi toate problemele de scalare.,
puteți spune care sunt canvas și care sunt SVG?
Concluzie
după Cum puteți vedea, există numeroase motive pentru D3 este destul de învechit acum pentru multe cazuri de uz comun. Web – ul a evoluat semnificativ de la lansarea sa., Dacă faci diagrame simple, cum ar fi gogoși, diagrame bar, diagrame linie, parcele scatter, etc, ia în considerare a vedea dacă le puteți pune în aplicare folosind cadrul existent. Nu există nimic cu adevărat că D3 vă va oferi pentru acele cazuri de utilizare. În ceea ce privește întreținerea, codul dvs. va fi probabil mai ușor de întreținut decât mai dificil de întreținut și, dacă trebuie să faceți modificări, ar trebui să fie banal să faceți aceste modificări.
nu există niciun motiv pentru managerii de produse să se simtă preocupați de faptul că nu utilizează D3 și nici nu ar trebui să vă preocupați.
Vă mulțumim pentru lectură!,
actualizări
- articol actualizat pentru a adăuga ” dar Canvas nu scară ca SVG ?”secțiune.