Pokaždé, když jsem pracovat na projektu s vizualizací, projektové manažery, obvykle reagují v horor, když řeknu, že nejsem s použitím D3. Proč existují obavy? Proč bych se rozhodl nepoužívat D3?
při zodpovězení těchto otázek musíme pochopit kontext, ve kterém byl D3 vytvořen., D3 byl poprvé vydán v roce 2011 a v té době byl docela inovativní.
normálně to, co byste viděli, jsou knihovny, které poskytují grafy po vybalení z krabice a s masivním seznamem možností. To může fungovat, ale problém je v tom, že pokaždé, když má někdo nový požadavek, musí být přidána a podporována možnost. Nakonec skončíte s tím, co je efektivně jazykem, kde k definování grafu používáte několik objektů. D3 vzal jiný přístup, místo toho, aby vám plné komponenty, to vám dává data-řízený pomocník funkce vytvořit tyto komponenty sami.,
v této době byly populární knihovny jako jQuery a páteřní. Vytvoření vlastních grafů pomocí těchto knihoven by bylo náročné, zejména pokud chcete, aby byly dynamické. Prohlížeče byly pouze jen přijetím nové moderní CSS standardy jako přechody, a další moderní vlastnosti, jako je flex box byly stále věkových kategorií od realizován.
D3 vyřešil mnoho těchto problémů a byl to bezpochyby nejjednodušší přístup k implementaci vizualizací v té době. Od té doby se však hodně změnilo., Máme nové moderní rámce, které používají flexibilnější a výraznější koncepty, jako je virtuální DOM, a CSS má tolik nových možností pro rozvržení a animace.
než abych automaticky přeskočil na D3, dovolte mi uvést několik důvodů, proč byste měli přehodnotit své použití.
v posledních několika letech jsem s D3 několikrát spolupracoval a implementoval jsem s ním všechny druhy vizualizací. Rozumím obecným pojmům o D3 a stále se s tím snažím pracovat. Všichni, se kterými jsem pracoval, od juniorů až po starší vývojáře, s tím také bojují., Co mnoho lidí, včetně mě, je to, že najdeme příklad online, který zhruba odpovídá tomu, co hledáme, a upravte příklad tak, aby vyhovoval našim potřebám.
chceme-Li přidat nějaké vlastní funkce, pravděpodobně budeme dělat nějaké další vyhledávání, a najít něco, co nějak vypadá, že je správné, pokusit se pochopit, jak to funguje, a držet úpravou, dokud dělá to, co chceme dělat.
Zní to povědomě? Na druhou stranu, vývojáři v těchto dnech jsou velmi dobře obeznámeni s virtuálními knihovnami DOM a jsou obeznámeni s šablonováním., Nemá větší smysl tyto dovednosti využívat, než zavádět knihovnu, která vyžaduje úplně jiný způsob myšlení?
je to jednodušší, než si myslíte
Když poprvé přemýšlíte o vytvoření vlastních grafů od nuly, je běžné cítit strach a strach. Může to znít jako velmi komplikovaná komponenta k vytvoření, ale ve skutečnosti to není, když ji rozbijete. Vezměme si příklad linkového grafu. Zde je návod, jak byste udělali řádkový graf v D3:
zdroj: bl.ocks.,org
Zde je, jak jsem mohl něco takového udělat pomocí Preact:
A v CSS:
Zdroj: JSFiddle
Tam je docela dost kódu, ale já jsem jen pomocí nástrojů, které již mám k dispozici, v tomto případě, můj názor knihovna, která je Preact (může být cokoliv, i když, Reagovat, Vue, Hranatý atd.), a moderní CSS nástroje, jako flexbox.,
příklad D3 vyžaduje učení mnoha konceptů o D3. Ten vyžaduje pouze použití znalostí, které již máte o knihovně zobrazení. Tvrdím, že je to jednodušší na údržbu než D3 příklad, jako každý, kdo ví, výhled knihovny by měl být schopen skočit do kódu základnu a začít dělat změny.
nezapomeňte o velikost svazku
v Závislosti na typu grafu a kolik tree-shaking mohou optimalizovat svůj balíček, D3 v nejhorším případě bude dovážet 70+ KB kódu. To může mít dopad na načítání vašeho webu., Takže i když je pravda, že píšete více kódu než původní příklad D3, celkově distribuujete méně kódu, než kdybyste použili D3.
obecně platí, že při použití kódu třetí strany je vždy důležité pamatovat na náklady na používání tohoto kódu. Pokud požadujete pouze jednu funkci z knihovny, byste importovat celou knihovnu pro tuto funkci?, Ano, neměli byste vždy znovu vynalézat kolo, ale budete muset vzít v úvahu čas, aby se dozvěděli, že knihovna, velikost přidává do svého balíčku, licenci této knihovny, podporu, že knihovna bude mít, důvěryhodnost správců, schopnost opravovat chyby v včas, atd.
plátno a HTML jsou často lepší než SVG
Pokud jste si všimli v příkladu dříve, použili jsme kombinaci HTML a SVG. Z nějakého důvodu se lidé pokusí implementovat celé grafy pomocí svg, ale opravdu není třeba. CSS je v dnešní době mnohem silnější než SVG.,
například SVG nativně nepodporuje balení textu. Pokud bychom chtěli udělat text-obtékání, museli bychom to spočítat v Javascriptu:
Zdroj: bl.ocks.org
S HTML na druhou stranu, tak dlouho, jak white-space je nastavena na normal, to bude jen zabalit přirozeně.
prvky, jako jsou kruhy a obdélníky, lze provést v HTML a CSS. Můžete použít transform a border-radius vytvořit všechny druhy tvarů., Pokud jste chtěli udělat sloupcový graf v D3 se dvěma zaoblenými rohy, nemohli jste použít rect, protože zaokrouhlí všechny čtyři rohy namísto dvou rohů, které jste chtěli zaokrouhlit. Jedinou možností by bylo použití path.
jediným důvodem, proč bych používal značky SVG, je značka path. Je to stále jediný čistý způsob vytváření libovolných tvarů bez ekvivalentu HTML.
Pokud potřebujete další výkon, je třeba zvážit také značku canvas., S canvas budete muset kódovat základní interakce sami, ale přichází s výhodou, že nemáte režii HTML nebo SVG, které mohou spotřebovávat paměť a být pomalejší k aktualizaci. Jednotlivé pixely můžete aktualizovat na plátně, jak chcete, takže můžete optimalizovat vizualizaci a škálovat ji. Nová rozhraní API prohlížeče, jako jsou OffscreenCanvas, také pomohou zvýšit výkon při použití uvnitř pracovníků.
ale plátno nemá měřítko jako SVG?,
velmi častá věc, kterou jsem slyšel poměrně často, je, že plátno není vhodné pro vizualizace, protože to není měřítko, stejně jako SVG. Při běžném používání canvas, pokud přiblížíte nebo oddálíte stránku nebo použijete prohlížeč, který zobrazuje vyšší DPI, vaše plátno vyjde pixelated a rozmazané.
to se děje proto, že když vytvoříte plátno, musíte definovat, kolik pixelů chcete, aby vaše plátno kreslilo., Když jsme se nastavit atributy width height to může vypadat, že jsme nastavení CSS velikost, ale my jsme vlastně nastavení velikosti plátna kreslení prostor. To není totéž.
Normálně, CSS pixelů budou nastaveny na stejnou velikost jako vaše plátno, kresba prostoru, ale při zoom in/out s váš prohlížeč, budete vidět stejný problém znovu. Řešením je použití window.devicePixelRatio a škálování místa pro kreslení plátna.
zdroj: JSFiddle
pomocí poměru Pixelů můžeme zvětšit kreslicí prostor pro plátno. Ale zvětšení kreslicího prostoru nestačí, musíme také plátně říci, že budoucí výkresové operace musí být zmenšeny na poměr Pixelů. To pak vyřeší všechny problémy se škálováním.,
můžete zjistit, které z nich jsou plátno a které jsou SVG?
závěr
Jak vidíte, existuje mnoho důvodů, proč je D3 pro mnoho běžných případů použití poměrně zastaralý. Web se od svého vydání výrazně vyvinul., Pokud děláte jednoduché grafy, jako jsou koblihy, sloupcové grafy, řádkové grafy, rozptylové grafy atd., zvažte, zda je můžete implementovat pomocí stávajícího rámce. Neexistuje nic, co by vám D3 poskytlo pro tyto případy použití. Pokud jde o údržbu, váš kód bude pravděpodobně udržovatelnější než obtížnější udržovat, a pokud potřebujete provést nějaké změny, mělo by být triviální provést tyto změny.
není důvod, aby se produktoví manažeři cítili znepokojeni tím, že nepoužívají D3, a neměli byste se ani obávat.
Díky za čtení!,
aktualizace
- článek aktualizován přidat “ ale plátno nemá měřítko jako SVG?” oddíl.