Realizzare un grafico a nodi con Less e SVG path

Oggi ho realizzato un widget per visualizzare una struttura ad albero (costituita da rami e nodi) in puro CSS ed SVG, senza l’ausilio di JS.
Vi spiego brevemente quali strumenti ho utilizzato:
- LESS, utile per parametrizzare la “latitudine” dei rami dell’albero, tramite la funzione accoda-loop() che posiziona i link-rami uno sotto l’altro sino ad un massimo di 50 items.
- SVG, ho utilizzato un path svg per disegnare la “curva” che lega due nodi diversi, che segue la seguente serie di punti
M0,0 C50,0 50,100 100,100
- I link sono posizionati in maniera assoluta (position:absolute) rispetto ad ogni nodo in modo da facitare il riuso del nodo all’interno della struttura ricorsiva.
- Sull’HOVER vengono visualizzati dei tooltip su ogni link e viene azionata un’animazione dello “stroke-array”.
Unisciti alla discussione