JS-библиотека для создания интерфейса mindmap like

Question

Мне нужно создать интерфейс, аналогичный тому, который http://www.madeiracloud.com предоставляет для рисования сетевой архитектуры (для разных целей, чем то, что они делают).

В основном пользователи должны уметь перетаскивать & элементы сбрасывания на холст и связывать их с помощью стрелок направления.

Какую библиотеку я должен использовать для этого? Я смотрю на d3, raphael и ocanvas.

Answer 1

Рафаэль (http://raphaeljs.com/) в сочетании с Библиотекой графа Дракулы (http://dracula.ameisenbar.de/) поможет вам начать работу.

, а также thejit совершенен:

Multi-деревья JavaScript InfoVis Toolkit предоставляет инструменты для создания интерактивных данных визуализаций для Web.

http://thejit.org/

Edit:

вы также можете взглянуть на Processing.js

http://processingjs.org/

Processing.js сестра проект популярной обработки языка визуального программирования , предназначенный для Интернета. Processing.js делает ваши визуализации данных, цифровое искусство, интерактивную анимацию, образовательные графики, видеоигры и т. Д. Работать с использованием веб-стандартов и без каких-либо подключаемых модулей. Вы пишете код с использованием языка обработки, включите его на свою веб-страницу, а Processing.js сделает все остальное.

Answer 2

Вы должны взглянуть на проект MindMap, который использует Raphael.js внутренне.

Вы можете найти демо на http://kenneth.kufluk.com/google/js-mindmap/

Answer 3

В коммерческом контексте следует также взглянуть на то, что yFiles for HTML предложить.

Это общий графический чертеж и редактирование библиотеки javascript, которая легко решает ваш «перетаскивание и подключение». Существует также определенная mind map example доступна на сайте:

но этого приложения узлы не создаются с помощью перетаскивания. Это, конечно, также возможно, как видно из this online demo.

Специфическими сильными сторонами этой библиотеки являются автоматическая компоновка узлов и соединений, поэтому, если вы создаете большие сети или автоматически заполняете график из внешнего источника данных, это очень удобно. Однако, если вам не нужен этот набор функций, конечно, могут работать и более простые решения. Обратите внимание, что в d3 основное внимание уделяется , что позволяет просматривать данные, и это не столько взаимодействие пользователя и создание графиков в интерактивном режиме.

^{Отказ от ответственности: Я работаю в компании, которая создает эту библиотеку, однако я не представляю своего работодателя на SO. Мои комментарии мои.}