Libreria JS per la creazione di un'interfaccia simile alla mappa mentale

Question

Devo creare un'interfaccia simile a quella che http://www.madeiracloud.com fornisce per disegnare un'architettura di rete (per scopi diversi da quello che stanno facendo).

In pratica, gli utenti devono essere in grado di trascinare gli elementi & in una tela e collegarli utilizzando le frecce direzionali.

Quale libreria devo usare per questo? Sto guardando d3, raphael e ocanvas.

Answer 1

Raphaël (http://raphaeljs.com/) in combinazione con Dracula Graph Library (http://dracula.ameisenbar.de/) consente di iniziare.

e anche thejit è perfetto:

Multi-Alberi La JavaScript InfoVis Toolkit fornisce gli strumenti per la creazione di Interactive Data visualizzazioni per il Web.

http://thejit.org/

Edit:

si può anche dare un'occhiata a Processing.js

http://processingjs.org/

Processing.js è il progetto sorella del linguaggio di programmazione visuale Processing popolare , progettato per il web. Processing.js rende le tue visualizzazioni di dati, arte digitale, animazioni interattive, grafici educativi, videogiochi, ecc. Funzionano utilizzando gli standard web e senza alcun plug-in. Scrivi il codice utilizzando la lingua di elaborazione, includilo nella tua pagina web e Processing.js fa il resto.

Answer 2

Si consiglia di dare un'occhiata al progetto MindMap che utilizza Raphael.js internamente.

È possibile trovare la demo http://kenneth.kufluk.com/google/js-mindmap/

Answer 3

In un contesto commerciale si dovrebbe anche dare un'occhiata a quello che yFiles for HTML ha da offrire.

È un grafico generico che disegna e modifica la libreria di javascript che risolve facilmente il tuo caso di utilizzo "trascina e rilascia e collega". V'è anche una specifica mind map example disponibile on-line:

ma in questo nodi applicativi non sono creati tramite drag and drop. Questo, naturalmente, è possibile anche, come si può vedere in this online demo.

I punti di forza specifici di tale libreria sono la disposizione/disposizione automatica dei nodi e delle connessioni, quindi se si creano reti più grandi o si popola automaticamente il grafico da una fonte di dati esterna, ciò risulta molto utile. Tuttavia, se non si richiede questo set di funzionalità, è possibile che anche le soluzioni più semplici funzionino. Si noti che d3 ha il focus su visualizzazione dei dati e non riguarda tanto l'interazione dell'utente e la creazione di grafici in modo interattivo.

^{Disclaimer: Lavoro per la società che crea quella libreria, tuttavia non rappresento il mio datore di lavoro su SO. I miei commenti sono miei.}