tutorial - vuejs javascript
Biblioteca JS para crear una interfaz tipo mapa mental (3)
Tengo que crear una interfaz similar a la que http://www.madeiracloud.com proporciona para dibujar una arquitectura de red (para diferentes propósitos que lo que están haciendo).
Básicamente, los usuarios deben poder arrastrar y soltar elementos a un lienzo y conectarlos mediante flechas direccionales.
¿Qué biblioteca debo usar para esto? Estoy mirando d3, raphael y ocanvas.
Debería echar un vistazo al proyecto MindMap que utiliza http://raphaeljs.com/ internamente.
Puede encontrar la demostración en http://kenneth.kufluk.com/google/js-mindmap/
En un contexto comercial, también debería echar un vistazo a lo que yFiles para HTML tiene para ofrecer.
Es una biblioteca de javascript de dibujo y edición de gráficos genéricos que resuelve su caso de uso de "arrastrar y soltar y conectar" fácilmente. También hay un ejemplo de mapa mental específico disponible en línea:
pero en esta aplicación los nodos no se crean mediante arrastrar y soltar. Sin embargo, esto también es posible, como se puede ver en esta demostración en línea .
Las fortalezas específicas de esa biblioteca son la disposició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, es muy útil. Sin embargo, si no necesita este conjunto de características, las soluciones más simples también pueden funcionar, por supuesto. Tenga en cuenta que d3 se centra en la visualización de datos, y no se trata tanto de la interacción del usuario como de la creación de gráficos de forma interactiva.
Descargo de responsabilidad: trabajo para la compañía que crea esa biblioteca, sin embargo, no represento a mi empleador en SO. Mis comentarios son míos.
Raphaël ( http://raphaeljs.com/ ) en combinación con Dracula Graph Library ( http://dracula.ameisenbar.de/ ) lo ayudará a comenzar.
y también el jit es perfecto:
Multi-Trees El kit de herramientas de información de JavaScript proporciona herramientas para crear visualizaciones de datos interactivas para la web.
Editar:
También puedes echar un vistazo a Processing.js
Processing.js es el proyecto hermano del popular lenguaje de programación visual Processing, 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.