JS-Bibliothek zum Erstellen einer Mindmap wie Schnittstelle

Question

Ich muss eine Schnittstelle ähnlich wie http://www.madeiracloud.com zum Zeichnen einer Netzwerkarchitektur (für andere Zwecke als das, was sie tun).

Grundsätzlich sollten Benutzer in der Lage sein, & Drop-Elemente auf eine Zeichenfläche zu ziehen und sie mit den Richtungspfeilen zu verbinden.

Welche Bibliothek sollte ich dafür verwenden? Ich schaue auf d3, raphael und ocanvas.

Answer 1

Raphaël (http://raphaeljs.com/) in Kombination mit der Dracula Graph Library (http://dracula.ameisenbar.de/) wird Ihnen den Einstieg erleichtern.

und auch ist thejit perfekt:

Multi-Trees Das JavaScript InfoVis Toolkit bietet Tools für die Web Interactive Data Visualisierungen zu erstellen.

http://thejit.org/

Edit:

Sie auch einen Blick auf Processing.js

http://processingjs.org/

Processing.js ist das Schwesterprojekt der beliebten Verarbeitung visuelle Programmiersprache nehmen , für das Web entworfen. Mit processing.js arbeiten Ihre Datenvisualisierungen, digitale Kunst, interaktive Animationen, Lerngrafiken, Videospiele usw. mit Webstandards und ohne Plug-Ins. Sie schreiben Code mit der Verarbeitungssprache, fügen ihn in Ihre Webseite ein und Processing.js erledigt den Rest.

Answer 2

Sie sollten sich das Projekt MindMap ansehen, das intern Raphael.js verwendet.

Sie können die Demo bei http://kenneth.kufluk.com/google/js-mindmap/

Answer 3

In einem kommerziellen Kontext Sie auch einen Blick auf das, was nehmen sollte yFiles for HTML zu bieten hat.

Es ist eine allgemeine Grafik, die Javascript-Bibliothek zeichnet und bearbeitet, die Ihren "drag and drop and connect" Anwendungsfall leicht löst. Es gibt auch eine spezifische mind map example online verfügbar:

aber in dieser Anwendung Knoten nicht per Drag & Drop erstellt. Dies ist natürlich auch möglich, wie in this online demo zu sehen ist.

Die spezifischen Stärken dieser Bibliothek sind das automatische Layout/Anordnung von Knoten und Verbindungen. Wenn Sie also größere Netzwerke erstellen oder den Graphen automatisch aus einer externen Datenquelle befüllen, sind diese sehr nützlich. Wenn Sie diese Funktion nicht benötigen, können natürlich auch einfachere Lösungen funktionieren. Beachten Sie, dass d3 den Fokus auf Daten hat, die sich auf Daten beziehen, und es geht nicht so sehr um Benutzerinteraktion und interaktives Erstellen von Diagrammen.

^{Haftungsausschluss: Ich arbeite für das Unternehmen, das diese Bibliothek erstellt, jedoch stelle ich meinen Arbeitgeber nicht auf SO. Meine Kommentare sind meine eigenen.}