Engineer at RisingStack, interested in js, Golang,. Net Core.
a közelmúltban örömmel vettünk részt egy gépi tanulási projektben, amely olyan könyvtárakat foglal magában, mint a React és a D3.js. Számos feladat közül néhány diagramot fejlesztettem ki, amelyek segítenek az ML modellek eredményeinek feldolgozásában, mint például a naiv Bayes Vonaldiagram vagy csoportosított sávdiagram formájában.,
ebben a cikkben szeretném bemutatni a D3-mal való előrehaladásomat.js eddig, valamint azt mutatják, az alapvető használata a könyvtár az egyszerű példa egy bar chart.
a cikk elolvasása után megtudhatja, hogyan hozhat létre D3-at.js diagramok, mint ez könnyen:
a teljes forráskód itt érhető el.
mi a Risingstacknél szeretjük a JavaScript ökoszisztémát, a backendet és a front-end fejlesztést is. Személy szerint mindkettő érdekel., A backend, látom a mögöttes üzleti logika egy alkalmazás, miközben én is a lehetőséget, hogy hozzon létre félelmetes kinézetű cucc a front-end. Ott van a D3.js jön a képbe!
frissítés: a D3 2.része.js bemutató sorozat is elérhető: épület egy D3.js Calendar hőtérkép (a StackOverflow használati adatok megjelenítéséhez)
mi a D3.js?
D3.js egy adatvezérelt JavaScript könyvtár manipulálására DOM elemek.
” A D3 segít az adatok életre keltésében HTML, SVG és CSS segítségével., A D3 webes szabványokra helyezett hangsúlya a modern böngészők teljes képességeit biztosítja anélkül, hogy egy saját keretrendszerhez kötné magát, kombinálva a nagy teljesítményű vizualizációs komponenseket és a DOM manipuláció adatközpontú megközelítését.”- d3js.org
miért hozna létre diagramokat a D3-Mal.js az első helyen? Miért nem csak egy képet jelenít meg?
Nos, a diagramok harmadik féltől származó erőforrásokból származó információkon alapulnak, amelyek dinamikus megjelenítést igényelnek a megjelenítési idő alatt. Az SVG egy nagyon hatékony eszköz, amely jól illeszkedik ehhez az alkalmazási esethez.,
Vegyünk egy kitérőt, hogy lássuk, milyen előnyökkel járhatunk az SVG használatával.
az SVG
SVG előnyei skálázható vektorgrafikát jelentenek, amely technikailag egy XML alapú jelölőnyelv.
általában vektorgrafikák rajzolására, vonalak és alakzatok megadására vagy meglévő képek módosítására használják. A rendelkezésre álló elemek listáját itt találja.
előnyök:
- minden nagyobb böngészőben támogatott;
- DOM interfésszel rendelkezik, nem igényel harmadik féltől származó lib-t;
- skálázható, nagy felbontást képes fenntartani;
- csökkentett méret más képformátumokhoz képest.,
hátrányok:
- csak kétdimenziós képeket jeleníthet meg;
- hosszú tanulási görbe;
- a renderelés sokáig tarthat a számításigényes műveleteknél.
hátrányai ellenére az SVG nagyszerű eszköz ikonok, logók, illusztrációk vagy ebben az esetben diagramok megjelenítésére.
az első lépések a D3.js
az induláshoz sávdiagramot választottam, mert alacsony komplexitású vizuális elemet képvisel, miközben a D3 alapvető alkalmazását tanítja.js magát. Ez nem tévesztheti meg Önt, a D3 nagyszerű eszközöket kínál az adatok megjelenítéséhez., Nézze meg a github oldalt néhány igazán szép Használati ügyben!
a sávdiagram lehet vízszintes vagy függőleges a tájolása alapján. Megyek a függőleges egy aka Oszlopdiagrammal.
ezen az ábrán a Stack Overflow 2018 fejlesztői felmérésének eredménye alapján fogom megjeleníteni a top 10 legkedveltebb programozási nyelvet.
A rajzolás ideje!
SVG van egy koordináta-rendszer, amely indul a bal felső sarokban (0;0). Pozitív x-tengely jobbra megy, míg a pozitív y-tengely lefelé halad., Így az SVG magasságát figyelembe kell venni egy elem y koordinátájának kiszámításakor.
Ez elég háttér-ellenőrzés, írjunk néhány kódot!
1000 képpont szélességű és 600 képpont magasságú diagramot szeretnék létrehozni.
<body><svg /></body><script> const margin = 60; const width = 1000 - 2 * margin; const height = 600 - 2 * margin; const svg = d3.select('svg');</script>a fenti kódrészletben kiválasztom a létrehozott <svg> elemet a HTML fájlban d3 select. Ez a kiválasztási módszer elfogadja az összes választó karakterláncot, és visszaadja az első megfelelő elemet., Használja a selectAll, ha mindegyiket szeretné megkapni.
definiálok egy margin értéket is, amely egy kis extra párnázást ad a diagramnak. Padding lehet alkalmazni egy <g> elem lefordítva a kívánt értéket. Mostantól kezdve erre a csoportra támaszkodom, hogy egészséges távolságot tartsak az oldal bármely más tartalmától.
const chart = svg.append('g') .attr('transform', `translate(${margin}, ${margin})`);attribútumok hozzáadása egy elemhez olyan egyszerű, mint a attr módszer. A módszer első paramétere egy attribútumot vesz fel, amelyet alkalmazni akarok a kiválasztott DOM elemre., A második paraméter az érték vagy visszahívási funkció, amely visszaadja annak értékét. A fenti kód egyszerűen áthelyezi a diagram kezdetét az SVG (60;60) helyzetébe.
támogatott D3.js bemeneti formátumok
a rajz elindításához meg kell határoznom az adatforrást, amelyből dolgozom. Ehhez az oktatóanyaghoz egy egyszerű JavaScript tömböt használok, amely a nyelvek nevével és azok százalékos arányával rendelkező objektumokat tartalmaz, de fontos megemlíteni, hogy a D3.a js több adatformátumot támogat.
a könyvtár beépített funkció betölteni XMLHttpRequest,.csv fájlok, szöveges fájlok stb., Mindegyik forrás tartalmazhat olyan adatokat, amelyek D3.js használhatja, az egyetlen fontos dolog az, hogy építsenek egy tömb ki őket. Vegye figyelembe, hogy az 5.0-s verziótól a könyvtár ígéreteket használ az adatok betöltésére vonatkozó visszahívások helyett, ami nem visszafelé kompatibilis változás.
méretezés, tengelyek
folytassuk a diagram tengelyeivel. Az y-tengely rajzolásához meg kell állítanom a legalacsonyabb és a legmagasabb értéket, amely ebben az esetben 0 és 100.
ebben a bemutatóban százalékban dolgozom, de vannak segédprogramok a számoktól eltérő adattípusokhoz, amelyeket később elmagyarázok.,
meg kell osztanom a diagram magasságát e két érték között egyenlő részekre. Ehhez létrehozok valamit, amit méretezési funkciónak hívnak.
const yScale = d3.scaleLinear() .range() .domain();a lineáris skála a leggyakrabban ismert méretezési típus. A folyamatos bemeneti tartományt folyamatos kimeneti tartománygá alakítja. Figyeljük meg a range és domain módszert. Az első olyan hosszúságot vesz fel, amelyet meg kell osztani a tartományértékek korlátai között.,
ne feledje, hogy az SVG koordináta-rendszer a bal felső sarokból indul, ezért a tartomány az első paraméterként veszi a magasságot, nem pedig nulla.
a bal oldali tengely létrehozása olyan egyszerű, mint egy másik csoport hozzáadása, és a D3 axisLeft metódusa paraméterként a méretezési funkcióval.
chart.append('g') .call(d3.axisLeft(yScale)); most folytassa az x-tengelyt. 
figyelmét, hogy használom scaleBand az x-tengely, amely segít, hogy szét a tartomány a zenekar, majd kiszámolja a koordináták valamint szélességben a rács további padding.
D3.,js is képes kezelni dátum típusát többek között. a scaleTime nagyon hasonlít a scaleLinear-hoz, kivéve, hogy a domain itt egy sor dátum.
rajz bárok D3.js
gondoljon arra, hogy milyen bemenetre van szükségünk a rudak rajzolásához. Mindegyik olyan értéket képvisel, amelyet egyszerű formákkal, különösen téglalapokkal illusztrálnak. A következő kódrészletben a létrehozott csoport elemhez csatolom őket.
először is, I selectAll elemek a diagramon, amely üres eredménykészlettel tér vissza., Ezután adata függvény megmondja, hogy a Dom hány elemet kell frissíteni a tömb hossza alapján. enter azonosítja azokat az elemeket, amelyek hiányoznak, ha az adatbevitel hosszabb, mint a kiválasztás. Ez egy új választást ad vissza, amely a hozzáadandó elemeket képviseli. Ezt általában egy append követi, amely elemeket ad a DOM-hoz.
alapvetően mondom D3.js hozzáfűzi egy téglalapot minden tagja a tömb.
most ez csak téglalapokat ad hozzá egymás tetejére, amelyeknek nincs magassága vagy szélessége., Ezt a két tulajdonságot ki kell számítani, és itt jönnek újra a méretezési funkciók.
lásd, hozzáadom a téglalapok koordinátáit a attr hívással. A második paraméter lehet egy visszahívás, amely 3 paramétert vesz igénybe: a bemeneti adatok tényleges tagját, annak indexét, valamint az egész bemenetet.
.attr(’x’, (actual, index, array) => xScale(actual.value))A Méretezési függvény egy adott tartományérték koordinátáját adja vissza. A koordináták kiszámítása Egy darab torta, a trükk a rúd magasságával történik., A számított y koordinátát le kell vonni a diagram magasságából, hogy az értéket oszlopként helyesen ábrázolják.
meghatározom a téglalapok szélességét a méretezési funkcióval is. scaleBand bandwidth függvénye, amely egy elem számított szélességét adja vissza a beállított padding alapján.
szép munka, de nem olyan divatos, ugye?
hogy megakadályozzuk a közönségünk szemvérzését, adjunk hozzá néhány információt, és javítsuk a látványt!, 😉
Tippek a sávdiagramok készítéséhez
vannak olyan alapszabályok, amelyekben érdemes megemlíteni a sávdiagramokat.
- kerülje a 3D effektusok használatát;
- az adatpontokat intuitív módon Rendelje meg-betűrendben vagy rendezve;
- tartsa a távolságot a sávok között;
- az y tengelyt 0-nál kezdje, nem a legalacsonyabb értékkel;
- következetes színeket használjon;
- tengelycímkék, cím, forrásvonal hozzáadása.
D3.js Grid System
szeretném kiemelni az értékeket rácsvonalak hozzáadásával a háttérben.,
folytassa, kísérletezzen mind a függőleges, mind a vízszintes vonalakkal, de azt tanácsolom, hogy csak az egyiket jelenítsem meg. A túlzott vonalak zavaróak lehetnek. Ez a kódrészlet bemutatja, hogyan lehet mindkét megoldást hozzáadni.
ebben az esetben inkább a függőleges rácsvonalakat részesítem előnyben, mert a szemeket vezetik, és a teljes képet egyszerűnek és egyszerűnek tartják.
címkék a D3-ban.js
azt is szeretném, hogy a diagram átfogóbb hozzáadásával néhány szöveges útmutatást. Adjunk nevet a diagramnak, majd adjunk hozzá címkéket a tengelyekhez.,
A szövegek SVG elemek, amelyek az SVG-hez vagy csoportokhoz csatolhatók. Ezek X és y koordinátákkal helyezhetők el, míg a szöveg igazítása a text-anchor attribútummal történik. A címke hozzáadásához csak hívja atext módszert a szövegelemen.
interaktivitás D3-Mal.js
elég informatív diagramot kaptunk, de mégis vannak lehetőségek arra is, hogy interaktívvá tegyük.
a következő kódblokkban megmutatom, hogyan lehet esemény hallgatókat hozzáadni az SVG elemekhez.,
vegye figyelembe, hogy a függvény kifejezést használom a nyílfüggvény helyett, mert az elemet a this kulcsszón keresztül érem el.
a kiválasztott SVG elem átlátszatlanságát az egérmutatón az eredeti érték felére állítom, majd visszaállítom, amikor a kurzor elhagyja a területet.
az egér koordinátáit a d3.mousesegítségével is megkaphatja. Egy X és y koordinátájú tömböt ad vissza. Így egy eszköztipp megjelenítése a kurzor csúcsán egyáltalán nem lenne probléma.
a szemet gyönyörködtető diagramok létrehozása nem könnyű művészeti forma.,
szükség lehet grafikusok, UX kutatók és más hatalmas lények bölcsességére. A következő példában fogok mutatni néhány lehetőséget, hogy növeljék a diagram!
nagyon hasonló értékek jelennek meg a diagramon, hogy kiemeljem a sávértékek közötti eltéréseket, beállítottam egy eseményhallgatót a mouseenter eseményhez. Minden alkalommal, amikor a felhasználó egy adott oszlop felett lebeg, vízszintes vonal húzódik a sáv tetején. Továbbá kiszámítom a különbségeket a többi sávhoz képest, majd a sávokon is megjelenítem.,
elég ügyes, mi? Ehhez hozzáadtam az opacity példát, majd megnöveltem a sáv szélességét.
a transition módszer azt jelzi, hogy szeretnék animálni a Dom változásait. Intervallumát a duration függvény állítja be, amely ezredmásodperceket vesz argumentumként. Ez az átmenet felett elhalványul a zenekar színe, szélesíti a szélessége a bárban.
egy SVG vonal rajzolásához kell egy kezdőpont és egy célpont., Ezt a x1, y1 és x2, y2 koordinátákon keresztül lehet beállítani. A sor nem lesz látható, amíg a stroke attribútummal nem állítom be annak színét.
csak amouseenter esemény egy részét fedtem fel itt, ezért ne feledje, hogy vissza kell állítania vagy el kell távolítania amouseout esemény változásait. A teljes forráskód a cikk végén érhető el.
adjunk hozzá néhány stílust a diagramhoz!,
lássuk, mit értünk el eddig, és hogyan rázhatjuk fel ezt a diagramot valamilyen stílussal. Osztály attribútumokat adhat hozzá az SVG elemekhez ugyanazzal a attr funkcióval, amelyet korábban használtunk.
a diagram szép funkcionalitással rendelkezik. Az unalmas, statikus kép helyett az egérmutatón megjelenő ábrázolt értékek közötti eltéréseket is feltárja. A cím kontextusba helyezi a diagramot, a címkék pedig segítenek a tengelyek azonosításában a mértékegységgel. Azt is hozzá egy új címkét a jobb alsó sarokban, hogy jelölje meg a bemeneti forrás.,
csak a színek és betűtípusok frissítése maradt hátra!
a sötét háttérrel rendelkező diagramok miatt a világos színű sávok hűvösnek tűnnek. A Open Sans betűcsaládot is alkalmaztam az összes szövegre, valamint beállítottam a különböző címkék méretét és súlyát.
észrevetted, hogy a vonal szaggatott? Ezt a stroke-width és stroke-dasharray attribútumok beállításával lehet elvégezni. A stroke-dasharray segítségével meghatározhatja az alak körvonalait megváltoztató kötőjelek és rések mintáját.
rácsvonalak, ahol trükkös lesz., A stroke-width: 0 – ot a csoport útvonalelemeire kell alkalmaznom, hogy elrejtsem a diagram keretét, valamint csökkentsem láthatóságukat a vonalak átlátszatlanságának beállításával.
az összes többi css szabály a forráskódban található betűméreteket és színeket tartalmazza.
A D3.js Bar Chart Tutorial
D3.js egy csodálatos könyvtár DOM manipuláció. A mélysége számtalan rejtett (valójában nem Rejtett, nagyon jól dokumentált) kincset rejt, amelyek felfedezésre várnak., Ez az írás csak az eszközkészlet töredékeit tartalmazza, amelyek segítenek egy nem olyan középszerű sávdiagram létrehozásában.
folytassa, fedezze fel, használja és hozzon létre látványos vizualizációkat!