Inženýr v RisingStack, zájem JS, Golang, .NET Jádro.
Nedávno jsme měli to potěšení účastnit se projektu strojového učení, který zahrnuje knihovny jako React a D3.js. Mezi mnoha úkoly jsem vyvinul několik grafů, které pomáhají zpracovat výsledek ML modelů, jako je Naive Bayes, ve formě linkového grafu nebo seskupeného sloupcového grafu.,
v tomto článku bych rád představil svůj pokrok s D3.js zatím a ukázat základní využití knihovny prostřednictvím jednoduchého příkladu sloupcového grafu.
po přečtení tohoto článku se dozvíte, jak vytvořit D3.JS grafy, jako je tento snadno:
celý zdrojový kód je k dispozici zde.
my v RisingStack máme rádi ekosystém JavaScript, backend a front-end vývoj. Osobně mě oba zajímají., Na backendu, vidím základní obchodní logiku aplikace, zatímco mám také příležitost vytvořit úžasné vypadající věci na front-end. Tam je D3.js přichází do obrazu!
Update: A 2nd part of my d3.k dispozici je také řada výukových programů js: budování D3.js Calendar Heatmap (pro vizualizaci dat o využití StackOverflow)
co je D3.js?
D3.js je knihovna JavaScriptu řízená daty pro manipulaci s prvky DOM.
“ D3 vám pomůže oživit data pomocí HTML, SVG a CSS., D3 je důraz na webové standardy vám dává všechny funkce moderních prohlížečů bez vázání sami do vlastního rámce, který kombinuje výkonné vizualizační komponenty a data-řízený přístup k DOM manipulace.“- d3js.org
proč byste vytvářeli grafy s D3.js na prvním místě? Proč ne jen zobrazit obrázek?
grafy jsou založeny na informacích pocházejících ze zdrojů třetích stran, které vyžadují dynamickou vizualizaci během Vykreslování. Také SVG je velmi výkonný nástroj, který dobře zapadá do tohoto případu aplikace.,
Vezměme si objížďku, abychom zjistili, jaké výhody můžeme získat z používání SVG.
výhody SVG
SVG znamená škálovatelnou vektorovou grafiku, která je technicky značkovacím jazykem založeným na XML.
běžně se používá k kreslení vektorové grafiky, specifikování čar a tvarů nebo úpravě existujících obrázků. Seznam dostupných prvků najdete zde.
Výhody:
- Podporován ve všech hlavních prohlížečích;
- To má DOM rozhraní, nevyžaduje žádné třetí strany lib;
- Škálovatelná, je možné udržovat vysoké rozlišení;
- menší velikost ve srovnání s jinými formáty obrázků.,
Nevýhody:
- může zobrazit pouze dva-dimenzionální obrázky;
- Dlouhá křivka učení;
- Render může trvat dlouho s výpočetně náročné operace.
i přes své nevýhody je SVG skvělým nástrojem pro zobrazení ikon, log, ilustrací nebo v tomto případě grafů.
Začínáme s D3.js
vybral jsem sloupcový graf, abych mohl začít, protože představuje vizuální prvek s nízkou složitostí, zatímco učí základní aplikaci D3.js sám. To by vás nemělo oklamat, D3 poskytuje skvělou sadu nástrojů pro vizualizaci dat., Podívejte se na jeho stránku github pro některé opravdu pěkné případy použití!
sloupcový graf může být horizontální nebo vertikální na základě jeho orientace. Půjdu s vertikálním grafem sloupců aka.
na tomto diagramu se chystám Zobrazit 10 nejoblíbenějších programovacích jazyků založených na výsledku průzkumu pro vývojáře Stack Overflow 2018.
čas kreslit!
SVG má souřadnicový systém, který začíná od levého horního rohu (0;0). Pozitivní osa x jde doprava, zatímco kladná osa y směřuje dolů., Výška SVG je tedy třeba vzít v úvahu, pokud jde o výpočet Y souřadnice prvku.
to je dost kontrola na pozadí, napišme nějaký kód!
chci vytvořit graf s šířkou 1000 pixelů a výškou 600 pixelů.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>V kódu výše, já zvolte vytvořený <svg> element v HTML souboru s d3 select. Tato metoda výběru přijímá všechny druhy řetězců voliče a vrací první odpovídající prvek., Pokud chcete získat všechny, použijte selectAll.
také definuji hodnotu marže, která dává trochu extra polstrování do grafu. Polstrování lze aplikovat pomocí prvku<g> přeloženého požadovanou hodnotou. Od této chvíle čerpám z této skupiny, abych udržel zdravou vzdálenost od jakéhokoli jiného obsahu stránky.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);přidání atributů k prvku je stejně snadné jako volání metodyattr. První parametr metody má atribut, který chci použít na vybraný prvek DOM., Druhým parametrem je hodnota nebo funkce zpětného volání, která vrací jeho hodnotu. Výše uvedený kód jednoduše přesune začátek grafu do polohy (60; 60) SVG.
Podporované D3.js vstupní formáty
Chcete-li začít kreslit, musím definovat zdroj dat budu pracovat. Pro tento tutoriál, já používám obyčejný JavaScript pole, které drží objekty s názvem jazyky a jejich procentní sazby, ale je důležité zmínit, že D3.js podporuje více datových formátů.
knihovna má vestavěnou funkci pro načtení z XMLHttpRequest, .csv soubory, textové soubory atd., Každý z těchto zdrojů může obsahovat údaje, které D3.js může použít, jediná důležitá věc je postavit pole z nich. Všimněte si, že od verze 5.0 knihovna používá sliby namísto zpětné volání pro načítání dat, což je non-zpětně kompatibilní změna.
škálování, osy
pojďme dál s osami grafu. Abych nakreslil osu y, musím nastavit nejnižší a nejvyšší limit hodnoty, který je v tomto případě 0 a 100.
pracuji s procenty v tomto tutoriálu, ale existují obslužné funkce pro jiné typy dat než čísla, které vysvětlím později.,
musím rozdělit výšku grafu mezi tyto dvě hodnoty na stejné části. Za tímto účelem vytvořím něco, co se nazývá funkce měřítka.
const yScale = d3.scaleLinear() .range() .domain();lineární měřítko je nejčastěji známý typ měřítka. Převádí kontinuální vstupní doménu na kontinuální výstupní rozsah. Všimněte si metody range a domain. První z nich má délku, která by měla být rozdělena mezi limity hodnot domény.,
pamatujte, že souřadnicový systém SVG začíná od levého horního rohu, proto rozsah bere výšku jako první parametr a ne nulu.
vytvoření osy vlevo je stejně jednoduché jako přidání další skupiny a volání metody D3 axisLeft s funkcí škálování jako parametrem.
chart.append('g') .call(d3.axisLeft(yScale));nyní pokračujte osou x.
uvědomte si, že používám scaleBand pro osy x, která pomáhá rozdělit nabídku do kapely a vypočítat souřadnice a šířky tyče s další polstrování.
D3.,js je také schopen zvládnout Typ data mezi mnoha dalšími. scaleTime je opravdu podobný scaleLinear kromě domény je zde řada dat.
rýsovací lišty v D3.js
Přemýšlejte o tom, jaký druh vstupu musíme nakreslit tyče. Každá z nich představuje hodnotu, která je ilustrována jednoduchými tvary, konkrétně obdélníky. V dalším úryvku kódu je připojuji k vytvořenému prvku skupiny.
první, i selectAll prvky na grafu, který se vrací s prázdnou sadu výsledků., Poté funkce data řekne, kolik prvků by měl být DOM aktualizován na základě délky pole. enter identifikuje prvky, které chybí, pokud je vstup dat delší než výběr. Tím se vrátí nový výběr představující prvky, které je třeba přidat. Obvykle následuje append, který přidává prvky DOM.
v podstatě říkám D3.js připojit obdélník pro každého člena pole.
nyní to přidává pouze obdélníky na sebe, které nemají výšku ani šířku., Tyto dva atributy je třeba vypočítat a tam se funkce škálování opět hodí.
viz, přidám souřadnice obdélníků sattr volání. Druhý parametr může být zpětné volání, které trvá 3 parametry: aktuální člen na vstupní data, index a celý vstup.
.attr(’x’, (actual, index, array) => xScale(actual.value))funkce škálování vrací souřadnici pro danou hodnotu domény. Výpočet souřadnic je kus dortu, trik je s výškou lišty., Vypočítaná souřadnice y musí být odečtena od výšky grafu, aby se dosáhlo správného znázornění hodnoty jako sloupce.
i definovat šířku obdélníků s funkcí škálování stejně. scaleBand má funkci bandwidth, která vrací vypočtenou šířku pro jeden prvek na základě nastaveného polstrování.
pěkná práce, ale ne tak efektní, že?
Chcete-li zabránit našemu publiku v krvácení z očí, přidáme nějaké informace a zlepšíme vizuální efekty!, 😉
tipy na vytváření sloupcových grafů
existují některá základní pravidla s čárovými grafy, které stojí za zmínku.
- Vyhněte se použití 3D efekty;
- Pořadí datových bodů intuitivně – řazeny podle abecedy, nebo;
- Udržet vzdálenost mezi kapely;
- Začátek osy y na 0 a ne s nejnižší hodnotou;
- Použití konzistentní barvy;
- Přidat popisky os, název, zdrojový řádek.
D3.JS Grid System
chci zvýraznit hodnoty přidáním řádků mřížky na pozadí.,
pokračujte, experimentujte s vertikálními i vodorovnými čarami, ale moje rada je zobrazit pouze jednu z nich. Nadměrné čáry mohou být rušivé. Tento fragment kódu představuje, jak přidat obě řešení.
v tomto případě preferuji svislé čáry mřížky, protože vedou oči a udržují celkový obraz prostý a jednoduchý.
štítky v D3.js
také chci, aby byl diagram komplexnější přidáním nějakého textového vedení. Pojďme dát název grafu a přidat štítky pro osy.,
texty jsou prvky SVG, které lze připojit k SVG nebo skupinám. Mohou být umístěny se souřadnicemi x a y, zatímco zarovnání textu se provádí pomocí atributu text-anchor. Chcete-li přidat samotný štítek, stačí na textovém prvku zavolat metodu text.
interaktivita s D3.js
máme docela informativní graf, ale stále existují možnosti, jak to udělat interaktivní.
V dalším bloku kódu vám ukážu, jak přidat posluchače událostí do prvků SVG.,
Všimněte si, že místo funkce šipky používám výraz funkce, protože přistupuji k prvku pomocíthis Klíčové slovo.
nastavil jsem neprůhlednost vybraného prvku SVG na polovinu původní hodnoty na myši a resetoval ji, když kurzor opustí oblast.
můžete také získat souřadnice myši s d3.mouse. Vrací pole se souřadnicí x a y. Tímto způsobem by Zobrazení popisku na špičce kurzoru nebylo vůbec problém.
vytváření oko-praskání diagramy není snadná umělecká forma.,
jeden by mohl vyžadovat moudrost grafiků, výzkumníků UX a dalších mocných tvorů. V následujícím příkladu ukážu několik možností, jak zvýšit váš graf!
mám velmi podobné hodnoty zobrazené na grafu, takže pro zvýraznění rozdílů mezi hodnotami lišty jsem nastavil posluchače událostí pro událost mouseenter. Pokaždé, když se uživatel vznáší nad určitým sloupcem a, na horní straně této lišty je nakreslena vodorovná čára. Dále také vypočítávám rozdíly ve srovnání s ostatními pásmy a zobrazuji je na tyčích.,
docela elegantní, co? Také jsem k tomu přidal příklad krytí a zvětšil šířku lišty.
metodatransition znamená, že chci animovat změny DOM. Jeho interval je nastaven pomocí funkce duration, která bere milisekundy jako argumenty. Tento přechod nad vybledne barvu pásma a rozšíří šířku lišty.
Chcete-li nakreslit řádek SVG, potřebuji start a cílový bod., To lze nastavit pomocí x1 y1 x2 y2 souřadnice. Řádek nebude viditelný, dokud nenastavím jeho barvu pomocí atributu stroke.
odhalil jsem pouze část událostimouseenter takže mějte na paměti, že musíte vrátit nebo odstranit změny na události mouseout. Celý zdrojový kód je k dispozici na konci článku.
pojďme přidat nějaký styl do grafu!,
podívejme se, čeho jsme dosud dosáhli a jak můžeme tento graf otřást nějakým stylem. Atributy třídy můžete přidat do prvků SVG se stejnou funkcí attr, kterou jsme dříve použili.
schéma má pěknou sadu funkcí. Namísto tupého statického obrazu také odhaluje rozdíly mezi reprezentovanými hodnotami na myši. Název uvádí graf do kontextu a štítky pomáhají identifikovat osy s měrnou jednotkou. Také přidám nový štítek do pravého dolního rohu a označím vstupní zdroj.,
jediné, co zbývá, je Upgradovat barvy a písma!
grafy s tmavým pozadím způsobují, že jasné barevné pruhy vypadají skvěle. Také jsem použil Open Sans Rodina písma na všechny texty a nastavil velikost a hmotnost pro různé štítky.
všimnete si, že linka byla přerušena? To lze provést nastavenímstroke-width astroke-dasharray atributy. stroke-dasharray, můžete definovat vzor pomlček a mezer, které mění obrys tvaru.
mřížkové čáry, kde je to složité., Musím použít stroke-width: 0 cesta prvků ve skupině skrýt rám diagramu a také snížit jejich viditelnost nastavením krytí linky.
všechna ostatní pravidla css pokrývají velikost písma a barvy, které najdete ve zdrojovém kódu.
balení našeho D3.JS Bar Chart Tutorial
D3.js je úžasná Knihovna pro manipulaci s DOM. Hloubka skrývá nespočet skrytých (ve skutečnosti ne skrytých, je to opravdu dobře zdokumentováno) pokladů, které čekají na objev., Toto psaní pokrývá pouze fragmenty sady nástrojů, které pomáhají vytvořit ne tak průměrný sloupcový graf.
pokračujte, prozkoumejte ji, použijte ji a vytvořte velkolepé vizualizace!