Vítejte u druhého příspěvku v této sérii základů D3.js – místo, kde se všichni společně učíme. Pokud jste v této sérii noví, podívejte se prosím na 1. díl, než budete pokračovat.
Abychom zrekapitulovali minulou lekci, naučili jsme se:
- Co je D3 a proč byste jej používali. 🤔
- Nastavení D3 v novém projektu. 👩💻
- Jak vybrat prvky DOM pomocí select() a selectAll(). ☝️
- Jak připojit prvky k modelu DOM pomocí append(). ➕
- Jak přidat atributy HTML k prvkům pomocí attr(). ➕
- Uložení výběrů do proměnné. 💾
- Použití metody text() k přidání textu do prvku. 📝
Dnes se naučíme, jak svázat data s prvky DOM. Toto je skutečně jádro D3:
Vazba dat znamená, že později můžeme případně interaktivně aktualizovat naše tabulky a grafy. Vzrušující, že?
Vezměte si šálek vašeho oblíbeného mozkového paliva a jdeme na to.
Nastavení
Minule jsme pracovali s neuspořádaným seznamem a přidali tři li prvky k tomu. Náš kód vypadal takto:
d3.select("body")
.append('ul');
const ul = d3.select('ul');
ul.append('li').text('first');
ul.append('li').text('second');
ul.append('li').text('third');
Dnes zůstaneme u neuspořádaného seznamu, ale dynamicky budeme generovat li Prvky. Pokračujte a smažte poslední připojení těch li Prvky.
K navázání dat potřebujeme nejprve datovou sadu. To může být cokoliv. Na rozdíl od předpřipravených vizualizačních platforem je síla D3 v tom, že je skutečně na vás, jaká data se dostanou do prohlížeče a jak.
Později v této sérii prozkoumáme několik různých datových sad, ale zatím to zjednodušíme pomocí řady čísel:
const dataset = [6, 18, 58, 4, 23, 10, 74, 30];
d3.select("body")
.append('ul');
const ul = d3.select('ul');
Dostat data do prohlížeče v D3 funguje trochu netradičně. Nejprve musíme vybrat prvky, které ještě neexistují. A protože máme více než jedno číslo, se kterým se chceme vypořádat, musíme použít metodu 'selectAll()', kterou jsme se naučili v části 1:
const dataset = [6, 18, 58, 4, 23, 10, 74, 30];
d3.select("body")
.append('ul');
const ul = d3.select('ul');
ul.selectAll('li')
Může se to zdát zvláštní, ale berte to jako přípravný krok. Je to podobný koncept jako deklarování prázdné proměnné v JavaScriptu před přiřazením dat ve smyčce.
Vazba dat
Správně, čas zabývat se daty. K předání datové sady d3 musíme použít .data() a enter() metody. A pamatujte, můžeme je spojit dohromady.
const dataset = [6, 18, 58, 4, 23, 10, 74, 30];
d3.select("body")
.append('ul');
const ul = d3.select('ul');
ul.selectAll('li')
.data(dataset)
.enter()
data() počítá a analyzuje naše data. Když máme v datové sadě více dat, než je prvků DOM, musíme použít enter() metoda. Vytváří zástupný symbol pro každý další prvek, který potřebujeme v DOM. Takže právě teď pro nás vytvořilo osm zástupných symbolů. Později v seriálu se podíváme na update() a exit() metody.
Pokud nyní spustíte tento kód, nic neuvidíte. Je to proto, že jsme vybrali naše li prvky, ale nepřipojili jsme je.
ul.selectAll('li')
.data(dataset)
.enter().append('li');
V tuto chvíli máme na stránce osm prvků seznamu.
Je to pokrok, ale D3 nebude automaticky přidávat textové hodnoty do DOM, protože nemusíme vždy chtít vizualizovat naše data tímto způsobem. Aby se text zobrazil, musíme použít text() metoda, kterou jsme se naučili v minulé lekci a která vám umožňuje nastavit libovolnou textovou hodnotu pro prvky v DOM.
ul.selectAll('li')
.data(dataset)
.enter().append('li')
.text('New list element!);
Zde jsme v podstatě řekli 'připojit text 'Nový prvek seznamu!' ke každému li prvek, který jsme vytvořili v DOM. Nezdá se to příliš užitečné, ale jednoho dne může existovat důvod, proč chcete pro každý prvek na stránce statickou hodnotu. Mohli jste například navrhnout vizualizaci, která jednoduše počítá, kolik něčeho tam je.
Abychom získali správné odpovídající hodnoty datové sady pro každý prvek, budeme muset dělat věci trochu dynamičtěji a procházet naši datovou sadu. K tomu používáme jednoduchou funkci, která řekne D3, aby ukázal odpovídající hodnotu pro každý prvek.
function(d) {return d};
ul.selectAll('li')
.data(dataset)
.enter().append('li')
.text(function(d) {return d});
A voilà! Na stránce se zobrazuje naše datová sada.
Není to nejvzrušující výstup, ale stavební kameny D3 se začínají formovat. S využitím naší představivosti a lekcí, které jsme se doposud naučili, můžeme začít přemýšlet o tom, jak využít funkce nejen ke změně textu, ale i barev, tvarů a animací.
Rekapitulace
Opět to není nejvzrušující výstup, ale naučili jsme se skutečné stavební kameny D3:
- Jak spojit naše data s DOM pomocí dvou nových metod:
data()aenter(). - Jak pomocí funkce získat vizuální reprezentaci hodnot datové sady v modelu DOM.
Sledujte příští týden rychlý kurz SVG, kde vytvoříme jednoduchý sloupcový graf. 📊