V minulém článku jsme se dozvěděli o měřítkách, které pomáhají při převodu našich dat jako datových bodů pro svg.
Vizualizace dat znamená práci s daty. Chceme přistupovat k požadovaným datům efektivním způsobem. Joins nám pomáhá efektivně svázat data s prvkem DOM.
Chcete-li připojit data k DOM, stačí zavolat .data() na vybraném prvku d3 a předejte svá data jako parametr. V níže uvedeném příkladu máme 5 kruhových prvků. Vyberte všechny prvky a zavolejte .data() předáním dat do něj.
.data() funkce bude procházet daty a naváže data na každý uzel jeden po druhém. Stiskněte F12, znovu načtěte stránku a zkontrolujte protokoly. Najdete seznam uzlů, které jsme vybrali, a rozbalte první prvek a přejděte dolů dolů, kde můžete vidět __data__ který má příslušná data připojena k prvku, ke kterému máte přístup kdykoli select ten konkrétní prvek.
Pokud jste pozorovali nebo ne, naše data jsou pouze 4 dlouhá, ale tato data jsme spojili s 5 vybranými prvky. Zkontrolujte pátý prvek ze stejných protokolů, nebude tam žádný __data__ majetek k tomu.
D3 nám poskytuje snadný způsob, jak upravit prvky DOM na data pomocí .enter() funkce pro přidávání dat a .exit() funkce pro odstranění dat. Obě funkce vrátí data navíc, ale .enter() následuje .append() přidá další prvky a .exit() následuje .remove() odstraní nadbytečné prvky.
Odebrat příklad
Příklad připojení
Každá funkce získá připojená data jako parametr zpětného volání, se kterým můžeme dělat triky. Stejně jako změna hodnot jeho atributů a vlastností css.
V níže uvedeném příkladu měníme barvu výplně prvků kruhu na základě jejich poloměru. Pokud je menší než 35, barva výplně by měla být červená a jinak oranžová. Všimněte si, že podmínka se vztahuje pouze na další prvky, protože jsme použili podmínku po příkazu enter. Musíme znovu vybrat všechny kruhy, abychom vytvořili podmínku pro všechny.