201514Jul

Cola.js: Bibliothek für Constraint-Layout-Diagramme

Graphen und Diagramme, die auf einer kraftgelenkter Anordnung basieren (Force-Directed Graphs), können auch als "Constraint-Based Layout" bezeichnet werden. Für derartige Szenarien bieten sich Skripte wie Arbor.js oder Sigma.js an. Es gibt zudem noch eine weitere Bibliothek, die interessante Features bietet: Cola.js kann mit D3.js, SVG.js, aber auch mit THREE.js kombiniert werden, um kraftgelenkte Graphen zu zeichnen.

Cola.js - Bibliothek für Constraint-Diagramme

Die Graphen zeichnen sich durch eine ästhetische Anordnung aus, da sich möglichst wenige Linien, die eine gemeinsame Schnittstelle aufweisen, überlappen und die verbundenen Elemente immer einen gewissen Abstand zueinander beibehalten. Dieses Cola.js-Beispiel zeigt den Einsatz in Verbindung mit THREE.js. Dadurch werden auch dreidimensionale kraftgelenkte Diagramme möglich, dessen Umsetzung ohne eine spezielle Bibliothek einen gewissen Schwierigkeitsgrad darstellen würde. Auf der Website von Cola.js finden sich noch weitere Beispiele, das Skript selbst steht als NPM-Modul und in einer Web-Variante bei GitHub bereit.