Javascript 用于创建类似界面的思维导图的 JS 库
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10232850/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JS library for creating a mindmap like interface
提问by MB.
I have to create an interface similar to what http://www.madeiracloud.comprovides for drawing a network architecture (for different purposes than what they are doing).
我必须创建一个类似于http://www.madeiracloud.com提供的用于绘制网络架构的界面（出于与他们正在做的目的不同的目的）。
Basically users should be able to drag & drop elements to a canvas and connect them using directional arrows.
基本上用户应该能够将元素拖放到画布上并使用方向箭头连接它们。
What library should I use for this? I'm looking at d3, raphael and ocanvas.
我应该为此使用什么库？我在看 d3、raphael 和 ocanvas。
回答by Elnaz
Rapha?l ( http://raphaeljs.com/)in combination with the Dracula Graph Library( http://dracula.ameisenbar.de/) will get you started.
Rapha?l ( http://raphaeljs.com/) 与 Dracula 图形库 ( http://dracula.ameisenbar.de/)相结合将使您入门。
and also thejit is perfect:
而且 thejit 也很完美：
Multi-Trees The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.
多树 JavaScript InfoVis Toolkit 提供了用于创建 Web 交互式数据可视化的工具。
Edit:
编辑：
you can also take a look at Processing.js
你也可以看看Processing.js
Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest.
Processing.js 是流行的 Processing 可视化编程语言的姊妹项目，专为 Web 设计。Processing.js 使您的数据可视化、数字艺术、互动动画、教育图表、视频游戏等使用网络标准工作，无需任何插件。您使用 Processing 语言编写代码，将其包含在您的网页中，Processing.js 会完成剩下的工作。
回答by Gokul N K
You should take a look at the MindMapproject which use Raphael.jsinternally.
您应该查看内部使用Raphael.js的MindMap项目。
You can find the demo at http://kenneth.kufluk.com/google/js-mindmap/
您可以在http://kenneth.kufluk.com/google/js-mindmap/找到演示
回答by Sebastian
In a commercial context you should also take a look at what yFiles for HTMLhas to offer.
在商业环境中，您还应该看看yFiles for HTML必须提供什么。
It's a generic graph drawing and editing javascript library which solves your "drag and drop and connect" use-case easily. There is also a specific mind map exampleavailable online:
它是一个通用的图形绘制和编辑 javascript 库，可以轻松解决您的“拖放和连接”用例。网上还有一个特定的思维导图示例：
but in this application nodes are not created via drag and drop. This however of course is possible, too, as can be seen in this online demo.
但在这个应用程序中，节点不是通过拖放创建的。然而，这当然也是可能的，正如在此在线演示中所见。
The specific strengths of that library are automatic layout/arrangement of nodes and connections, so if you are creating larger networks or populating the graph automatically from an external data-source these come in very handy. However if you don't require this feature set, simpler solutions may work, too, of course. Note that d3 has the focus on viewingdata, and is not so much about user interaction and creating graphs interactively.
该库的具体优势是节点和连接的自动布局/排列，因此如果您要创建更大的网络或从外部数据源自动填充图形，这些将非常方便。但是，如果您不需要此功能集，当然也可以使用更简单的解决方案。请注意，d3 专注于查看数据，而不是用户交互和交互式创建图形。
Disclaimer: I work for the company that creates that library, however I do not represent my employer on SO. My comments are my own.
免责声明：我为创建该库的公司工作，但我不代表我的雇主。我的评论是我自己的。
