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

Question

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

现在，我正在进行一些可行性研究，如何使用HTML 5客户端或Java胖客户端来完成此任务。我见过一些名为esri的API，但它已商业化。

我计划开发这个应用程序Angularjs或JavaFX。但是他们都没有为它构建库（我更喜欢用AngularJs开发这个客户端应用程序）。你能帮我找到任何可用于完成这项任务的JavaScript框架或Java库（然后我可以将它们与AngularJs或JavaFX集成）。

我在StackOverflow上看到了类似的question，它太旧了，但现在它可以是新的框架。

由于

Answer 1

我们可以通过一些HTML 5相关的UI框架来完成这项任务，这些框架可以显示交互式图形（用户可以创建，更新，读取和删除图形元素）。其中一些如下，

• GoJS

GoJS是一个功能丰富的JavaScript库，用于在现代Web浏览器和平台上实现自定义交互式图表和复杂可视化。 该库使用可自定义的模板和布局轻松构建复杂节点，链接和组的JavaScript图表。 商业许可证。

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

• JointJS

JointJS是一个现代HTML 5 JavaScript库，用于图表和图形的可视化和交互。 它可用于创建静态图表，或者更重要的是，可用于创建完全交互式图表工具，例如工作流程编辑器， 流程管理工具，IVR系统，API集成器，演示应用程序等。根据开源许可证（更少的功能）和商业许可证（更多功能）获得许可。

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

• mxGraph

mxGraph是一个JavaScript图表库，可以快速创建在任何主要浏览器中本机运行的交互式图形和图表应用程序。 在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是一个基于浏览器的动态可视化库。 该库旨在易于使用，处理大量动态数据，以及实现对数据的操作和交互。 在Apache 2.0（免费和开源）和MIT（开源许可证）下获得许可。

来源：vis.js library

• D3.js

D3.js是一个用于根据数据操作文档的JavaScript库。 D3使用HTML，SVG和CSS将数据变为现实。 D3对Web标准的强调为您提供了现代浏览器的全部功能， 将强大的可视化组件和数据驱动方法结合到DOM操作中。 根据BSD许可证（开源倡议）。

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

<强>结论

根据GoJS的功能，它是可视化交互式图形的最方便的框架， 因为UI可以轻松自定义，并可以将图模型保存为JSON格式。 但这是在商业许可下（每位开发人员2995美元）。

JointJS提供的开源许可证版本功能较少， 因此需要购买商业版以满足我们的要求。 定制复杂的UI可能很困难。

D3.js更加用户友好，但我们必须根据我们的要求进行更多精力调整，例如： 通过工具图标继续创建节点，使用户能够自定义节点的标题值，删除一些现有的视觉效果等。
需要探索图模型的保存格式（JSON，XML，TXT等）。

根据我的结论，我们可以为我们的开发选择mxGraph或vis.js JavaScript库。

mxGraph ：我们似乎可以轻松自定义“mxDraw”（Web 2.0风格的图表编辑器）绘图应用程序并重复使用它。    “图形编辑器”图表编辑器应用程序更加先进，可能需要更多时间来定制它，并且需要探索图表模型保存格式。

vis.js ：比'mxGraph'更加用户友好，但我们可能需要花费一些开发工作来探索Diagram Model保存格式并删除现有的视觉效果。