V poslední době používám D3 pro vizualizaci dat pro projekt React a na chvíli mě zaujal. Obzvláště mě zaujal rozsah tohoto velmi mocného nástroje, který má velký rozsah schopností řešit problémy související s jakýmkoliv druhem vizualizace dat.
Dává vám to pocit, že dokážete COKOLI . Dobře, pojďme si o tom promluvit.
Co je D3.js ?
D3.js je javascriptová knihovna používaná pro vizualizaci dat. Díky kombinaci SVG je velmi výkonný (Podpora vektorové grafiky) a HTML .
Nyní záleží na kreativitě vývojáře, který jej použije, aby jej skutečně vizualizoval tím nejkrásnějším způsobem.
Protože se jedná o data, d3.js pracuje na vašich čistých datech a transformuje je grafickým způsobem. Při aplikaci d3.js budete dělat spoustu CSS a zároveň řešit některé problémy s matematickou geometrií souřadnic. Například použití Pythagorovy věty, nalezení vzdálenosti mezi dvěma souřadnicemi (x1, y1) a (x2, y2) na grafu atd.
Tento článek se zaměřuje zejména na vytvoření komplexního uzlu grafu. Komplexní uzel odkazuje na uzel, ke kterému bude připojeno mnoho prvků nebo informací, namísto pouhého prázdného kruhu.
Proč konkrétně verze v5 ?
Tolik příkladů úryvků a gistů najdete zejména na bl.ocks.org nebo stackoverflow pro vytváření grafů nebo stromů s v3 verzi, ale ne mnoho na v5 verze.
Nezbytná podmínka
Html, CSS , Javascript, geometrie souřadnic.
Začněme
Budeme psát jednoduchý pracovní skript pro vytvoření komplexního SVG uzlu grafu.
Nejprve musíte zahrnout následující <script> uvnitř vašeho html <body> pro použití d3 v5 knihovna.
Prvek plátna a datového kontejneru
Zadejte width plátna a height kde budou umístěny všechny prvky SVG. Potom zavoláme d3.select() na body prvek s připojením svg a specifikovat vlastnosti jako width a height V současné době máme data json jako nodes se všemi parametry, které potřebujeme k vizualizaci.
Pojďme přidat nový prvek g do svg proměnnou (canvas) a vložte do ní data uzlu, indexujte pomocí id .
Obdélníkový uzel
Nyní přidáme rect prvek do našeho svg s (x,y) souřadnice jako (0,0) .
Nyní to začíná být složitější, protože nyní máme připravený náš základní uzel a rádi bychom dovnitř umístili mnohem více prvků s odkazem na obdélníkový uzel a ne na plátno. Jedním ze způsobů, jak toho dosáhnout, je získat souřadnice pomocí getBBox() .
Prvek obrázku
Nyní, když máme souřadnice umístění tohoto boxu, můžeme umístit věci dovnitř.
Řekněme, že chci umístit logo 
zde k dispozici. Je to jednoduché.
Jak můžete vidět, upravili jsme X a Y trochu podle toho, kde bychom to chtěli mít. Chtěl jsem, aby to bylo uprostřed, s trochou tabulátoru (10 ) zleva.
Textový prvek
Nyní chceme nějaký text. Používáme data uzlů a přistupujeme k nim pomocí klíčů. A znovu přidejte text na svg jako níže:
další příklad pro přidání textu
Kruhový prvek čítače
Co když chci do obdélníkového uzlu vložit kruh a zachovat v něm text. Děláme to následovně:
a text
Nakonec jednoduše sloučte všechny prvky do jednoho.
Zajímá vás, jak to vypadá při kontrole. Přesvědčte se sami.
