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

Question

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

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

我应该为此使用什么库？我在看 d3、raphael 和 ocanvas。

Answer 1

Raphaël ( http://raphaeljs.com/ ) 结合 Dracula 图形库 ( 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

你应该看看内部使用Raphael.js的MindMap项目。

您可以在http://kenneth.kufluk.com/google/js-mindmap/找到演示

Answer 3

在商业环境中，您还应该看看yFiles for HTML必须提供什么。

这是一个通用的图形绘制和编辑 JavaScript 库，可以轻松解决您的“拖放和连接”用例。网上还有一个特定的思维导图示例：

但在此应用程序中，节点不是通过拖放创建的。然而，这当然也是可能的，正如可以在这个在线演示中看到的那样。

该库的特定优势是节点和连接的自动布局/排列，因此如果您要创建更大的网络或从外部数据源自动填充图形，这些会非常方便。但是，如果您不需要此功能集，当然也可以使用更简单的解决方案。请注意，d3 的重点是查看数据，而不是用户交互和交互式创建图形。

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