带有拓扑图的 REST 客户端应用程序

REST Client application with Topology diagram

我想开发一个带有拓扑图的网络管理REST客户端(如下图所示)。使用该应用程序,用户应该能够通过拖放创建拓扑图,通过拖动更改节点位置,编辑节点属性和删除节点元素。

现在我正在做一些可行性研究,如何使用 HTML 5 客户端或 Java 胖客户端来完成这项任务。我看到一些 API 叫做 esri 但它是商业化的。

我已计划开发此应用程序 Angularjs 或 JavaFX。但是 none 其中有内置库(我更喜欢用 AngularJs 开发这个客户端应用程序)。您能否帮我找到任何可用于完成此任务的 JavaScript 框架或 Java 库(然后我可以将它们与 AngularJs 或 JavaFX 集成)。

我在 Whosebug 上看到过类似的 question,它太旧了,但现在可以使用新框架了。

谢谢

我们可以使用一些 HTML 5 个相关的 UI 框架来完成这项任务,这些框架可以可视化交互式图形(用户可以创建、更新、读取和删除图形元素)。其中一些如下,

  • GoJS

GoJS 是一个 feature-rich Java 脚本库,用于跨现代 Web 浏览器和平台实现自定义交互式图表和复杂的可视化效果。 该库使用可自定义的模板和布局,使构建复杂节点、链接和组的脚本图变得容易。 商业许可。

来源:https://gojs.net/latest/extensions/SnapLinkReshaping.html

  • JointJS

JointJS 是一个现代的 HTML5 Java脚本库,用于图表和图形的可视化和交互。 它可用于创建静态图表,更重要的是,它可用于创建完全交互式的图表工具,例如工作流编辑器、 流程管理工具、IVR 系统、API 集成商、演示应用程序等。在开源许可(较少功能)和商业许可(更多功能)下获得许可。

来源:https://resources.jointjs.com/demos/kitchensink

  • mxGraph

mxGraph 是一个 Java 脚本图表库,可以快速创建交互式图形和图表应用程序,运行 可以在任何主流浏览器中原生使用。 在 Apache 许可证 2.0(免费和开源)下。 支持 JavaScript、Java、.NET 和 PHP.

1) mxDraw

来源:https://jgraph.github.io/mxgraph/javascript/examples/editors/diagrameditor.html

2) 图表编辑器

来源:https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html

  • vis.js

vis.js 是一个动态的 browser-based 可视化库。 该库旨在易于使用、处理大量动态数据以及支持数据操作和交互。 在 Apache 2.0(免费和开源)和 MIT(开源许可)下获得许可。

来源:vis.js library

  • D3.js

D3.js 是一个 Java 脚本库,用于根据数据操作文档。 D3 使用 HTML、SVG 和 CSS 使数据栩栩如生。 D3 对网络标准的重视为您提供了现代浏览器的全部功能, 结合强大的可视化组件和 data-driven 方法来 DOM 操作。 在 BSD 许可下(开源倡议)。

来源:http://bl.ocks.org/rkirsling/5001347

结论

根据GoJS的特点,它是最方便的交互式图形可视化框架, 因为 UI 可以轻松自定义,并且可以将图表模型保存为 JSON 格式。 但这是在商业许可下(每位开发者 2995 美元)。

JointJS 的开源许可版本提供的功能较少, 因此需要购买商业版来满足我们的要求。 可能很难自定义它们的复杂 UI。

D3.js 更 user-friendly 但我们必须根据我们的要求进行更多努力 fine-tune 例如, 通过工具图标进行节点创建,允许用户自定义节点的标题值,删除一些现有的视觉效果等
Diagram Model的保存格式(JSON、XML、TXT等)需要探讨

根据我的结论,我们可以选择mxGraph或者vis.js Java脚本库进行开发。

mxGraph:看来我们可以轻松自定义“mxDraw”(web 2.0 风格的图表编辑器)绘图应用程序并重新使用它。 “Graph Editor”图表编辑器应用程序更高级,自定义它可能需要更多时间,需要探索图表模型保存格式。

vis.js:比“mxGraph”更 user-friendly 但我们可能需要花费一些开发精力来探索图表模型保存格式和删除现有的视觉效果。