Biblioteca JS para crear una interfaz tipo mapa mental

Question

Tengo que crear una interfaz similar a la que http://www.madeiracloud.com proporciona para dibujar una arquitectura de red (para fines diferentes a los que están haciendo).

Básicamente los usuarios deberían poder arrastrar & soltar elementos a un lienzo y conectarlos usando flechas direccionales.

¿Qué biblioteca debo usar para esto? Estoy mirando d3, raphael y ocanvas.

Answer 1

Raphaël (http://raphaeljs.com/) en combinación con la Biblioteca de gráficos Drácula (http://dracula.ameisenbar.de/) lo pondrán en marcha.

y también thejit es perfecta:

de múltiples árboles La JavaScript InfoVis Toolkit proporciona herramientas para crear visualizaciones de datos interactivos para la Web.

http://thejit.org/

Editar:

también se puede echar un vistazo a Processing.js

http://processingjs.org/

Processing.js es el proyecto de la hermana del lenguaje de programación Visual Processing populares , diseñado para la web. Processing.js hace que sus visualizaciones de datos, arte digital, animaciones interactivas, gráficos educativos, videojuegos, etc. funcionen utilizando estándares web y sin ningún complemento. Usted escribe el código usando el lenguaje de procesamiento, lo incluye en su página web y Processing.js hace el resto.

Answer 2

Debe echar un vistazo al proyecto MindMap que utiliza Raphael.js internamente.

se puede encontrar el demo en http://kenneth.kufluk.com/google/js-mindmap/

Answer 3

En un contexto comercial también debe tomar un vistazo a lo yFiles for HTML tiene que ofrecer.

Es una biblioteca genérica de dibujo y edición de gráficos que resuelve fácilmente el caso de uso "arrastrar y soltar y conectar". También hay una específica mind map example disponible en línea:

pero en esta solicitud nodos no son creados a través de arrastrar y soltar. Sin embargo, esto también es posible, como se puede ver en this online demo.

Las fortalezas específicas de esa biblioteca son la distribución/disposición automática de nodos y conexiones, por lo que si está creando redes más grandes o rellenando el gráfico automáticamente desde una fuente de datos externa, estas son muy útiles. Sin embargo, si no requiere este conjunto de características, las soluciones más simples también pueden funcionar, por supuesto. Tenga en cuenta que d3 tiene el foco en viendo los datos, y no se trata tanto de la interacción del usuario y la creación de gráficos de forma interactiva.

^{Descargo de responsabilidad: Trabajo para la compañía que crea esa biblioteca, pero no represento a mi empleador en SO. Mis comentarios son míos}