用于创建类似界面的思维导图的JS库

Question

我必须创建一个类似于http://www.madeiracloud.com所提供的界面来绘制网络架构（用于不同于他们正在做的目的）。

基本上用户应该能够拖拽将元素拖放到画布上并使用方向箭头连接它们。

我应该使用哪个库？我正在看d3，raphael和ocanvas。

Answer 1

Raphaël（http://raphaeljs.com/）与Dracula Graph Library（http://dracula.ameisenbar.de/）相结合，将帮助您入门。

并且thejit也很完美：

多树 JavaScript InfoVis Toolkit提供了用于为Web创建交互式数据可视化的工具。

http://thejit.org/

修改

您还可以查看Processing.js

http://processingjs.org/

Processing.js是流行的Processing可视化编程语言的姊妹项目，专为Web设计。 Processing.js使您的数据可视化，数字艺术，交互式动画，教育图，视频游戏等使用Web标准并且无需任何插件。您使用Processing语言编写代码，将其包含在您的网页中，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专注于查看数据，而不是用户交互和交互式创建图表。

^{免责声明：我为创建该图书馆的公司工作，但我并不代表我的雇主。我的评论是我自己的。}