logo

D3.js Join Semantics – konceptuální vzhled

Začít s D3 je opravdu snadné, když si projdete jejich vynikající dokumentaci. Cílem tohoto příspěvku je však poskytnout vám představu o tom, jaké vzory používá pro spojování prvků DOM a datových položek.

Klíčovým prvkem D3 je, že zachází s daty, která chcete vizualizovat, jako s databází. Můžeme si také myslet, že D3 zachází s prvky, které máte na své webové stránce, jako s databází.

Sémantika spojení dat

Řekněme, že v našem DOM máme následující prvky SVG a proměnnou data s nějakými hodnotami, se kterými to chceme svázat. 

<svg x="100" y="100">
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
    <rect></rect>
</svg>

Nyní se podívejme, jak D3 spojuje data s prvky DOM. Výše uvedenou strukturu použijeme jako referenci.

Aktualizovat

d3.selectAll('rect').data([1, 2, 3, 4, 5])

Máme tedy databázi prvků DOM a databázi datových položek. Když s nimi máme mapování 1:1, říkáme tomu sekce Aktualizace. Jakmile je toto přidružení vytvořeno interně v D3, můžeme manipulovat s našimi prvky DOM pomocí metod jako .attr() .

Tato situace se nazývá fáze „Aktualizace“. Představte si to jako přirozené spojení dvou databázových tabulek.

Enter

Co když máme více datových prvků než našich prvků DOM?

Pro takové případy, které jdou do jiné oblasti ve výběru s názvem Enter plocha. Tehdy můžeme do této oblasti přistupovat pomocí .enter() metoda v D3. Poté můžeme D3 říci, co má dělat s těmito nadbytečnými datovými položkami. Například, pokud chceme vytvořit nové „rect“ DOM prvky, můžeme udělat, 

d3.selectAll('rect')
    .data([1, 2, 3, 4, 5, **6**])
    .enter() // accessing the Enter area
    .append('rect') // telling what to do with it
    .attr('height', ...) // rest of the manipulations

Konec

Konečně máme případ, kdy máme více prvků DOM než našich datových prvků.

Představte si, že nyní máme 5 datových prvků, ale pouze 4 prvky DOM. Tyto další prvky uživatelského rozhraní tedy přejdou do Konec plocha. Stejně jako předtím, musíme jen říct D3, co má dělat s těmi extra předměty? Odstranit říkáte? 👍 

d3.selectAll('rect')
    .data([1, 2, 3, 4, 5])
    .exit()
    .remove();

Mapování pomocí relační algebry

Pamatujte, že nyní uvažujeme o D3 z hlediska databáze. Podívejme se, jak to můžeme zmapovat do relační algebry.

Jak vidíme, když máme prvky uživatelského rozhraní a data s mapováním 1:1, je to jako přirozené spojení. Když máme více dat než prvků uživatelského rozhraní, je to jako anti-join, kde získáme další datové prvky pomocí Enter etapa. Stejně jako ve fázi Exit získáváme další prvky uživatelského rozhraní, které se nemapují s daty.

Nyní známe základní principy sémantiky spojení D3. To nám pomáhá ponořit se do kódu D3.js, aniž bychom se příliš starali o syntaxi.

Co by se stalo, kdybychom udělali .selectAll() na prázdnou sadu prvků DOM? Můžeme stále používat .enter() ? I na to existuje známý vzor 😊Vysvětlím to v samostatném příspěvku na blogu.

Reference

  1. https://bost.ocks.org/mike/join/
  2. https://en.m.wikipedia.org/wiki/Relational_algebra