blocks|key|110438|text|我们可以使用一些HTML+5相关的UI框架来完成这项任务，这些框架可以可视化交互式图形(用户可以创建、更新、读取和删除图形元素)。他们中的一些人如下|type|unstyled|depth|inlineStyleRanges|entityRanges|data|110439|GoJS|unordered-list-item|110440|GoJS是一个功能丰富的JavaScript库，用于在现代web浏览器和平台上实现自定义交互图和复杂的可视化。该库使构建复杂节点、链接和组的JavaScript图更容易使用可定制的模板和布局。商业执照。|offset|length|110441|​|110442|📷|atomic|110443|110444|来源：https://gojs.net/latest/extensions/SnapLinkReshaping.html|110445|JointJS|110446|JointJS是一个现代的HTML5+JavaScript库，用于可视化和与图表的交互。它可以用于创建静态图，或者更重要的是创建完全交互式的图表工具，例如工作流编辑器、过程管理工具、IVR系统、API集成器、表示应用程序等等。在开源许可(较少的特性)和商业许可(更多的特性)下获得许可。|110447|110448|110449|110450|来源：https://resources.jointjs.com/demos/kitchensink|110451|mxGraph|110452|mxGraph是一个JavaScript图表库，它允许快速创建在任何主要浏览器中运行的交互式图形和图表应用程序。在2.0+(免费和开放源码)下。支持JavaScript、Java、.NET和PHP。|110453|1)+mxDraw|110454|110455|110456|110457|来源：https://jgraph.github.io/mxgraph/javascript/examples/editors/diagrameditor.html|110458|2)图形编辑器|110459|110460|110461|110462|来源：https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html|110463|vis.js|110464|vis.js是一个动态的基于浏览器的可视化库.该库被设计成易于使用，可以处理大量动态数据，并允许对数据进行操作和交互。在Apache2.0(免费和开放源码)和MIT+(开放源码许可证)下都获得了许可。|110465|110466|110467|110468|资料来源:+vis.js+图书馆|110469|D3.js|110470|D3.js是一个基于数据操作文档的JavaScript库。D3使用HTML、SVG和CSS将数据带入生活。D3对web标准的强调使你具备了现代浏览器的全部功能，将强大的可视化组件和数据驱动的DOM操作方法结合在一起。根据BSD许可证(开放源码倡议)。|110471|110472|110473|110474|来源：http://bl.ocks.org/rkirsling/5001347|110475|结论|style|BOLD|110476|根据GoJS的特点，它是可视化交互式图形的最方便的框架，因为UI可以方便地定制，并且可以将图模型保存为JSON格式。但这是在商业许可下(每个开发商2995美元)。|110477|JointJS提供了更少的开放源码许可版本的特性，因此需要购买商业版本来满足我们的需求。可能很难自定义它们的复杂UI。|110478|‘s对用户更友好，但我们必须按照我们的要求进行更多的调整，例如，通过工具图标进行节点创建，使用户能够自定义节点的标题值，删除一些现有的视觉效果等等。|110479|需要探讨保存格式(JSON、XML、TXT等)图模型。|110480|根据我的结论，我们可以为我们的开发选择mxGraph或vis.js+JavaScript库。|110481|mxGraph：我们似乎可以轻松地定制‘mxDraw’(Web2.0风格的图表编辑器)绘图应用程序并重用它。“图形编辑器”图表编辑器应用程序更高级，它可能需要更多的时间来定制它，并需要探索图表模型的保存格式。|110482|vis.js：比“mxGraph”更方便用户，但是我们可能需要花费一些开发工作来探索图表模型保存格式和删除现有的视觉效果。|110483|entityMap|0|LINK|mutability|MUTABLE|url|https://gojs.net/latest/index.html|1|IMAGE|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/8042ed4807e88999c6e2590d8912de9c.jpg|imageAlt|2|https://gojs.net/latest/extensions/SnapLinkReshaping.html|3|https://www.jointjs.com/|4|https://developer.qcloudimg.com/http-save/yehe-900000/186695f5e73135c4c6ec5b5325b378a8.jpg|5|https://resources.jointjs.com/demos/kitchensink|6|https://jgraph.github.io/mxgraph/|7|https://developer.qcloudimg.com/http-save/yehe-900000/4278fb797f84e4ad500ec8e74d892398.jpg|8|https://jgraph.github.io/mxgraph/javascript/examples/editors/diagrameditor.html|9|https://developer.qcloudimg.com/http-save/yehe-900000/bb3d785a76f12fbe74333de2ff5abc78.jpg|10|https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html|11|http://visjs.org/|12|https://developer.qcloudimg.com/http-save/yehe-900000/ca24ae19287709bb065f50d789b6a8a7.jpg|13|https://github.com/almende/vis/archive/v4.20.1.zip|14|https://d3js.org/|15|https://developer.qcloudimg.com/http-save/yehe-900000/1dd338f8d02395a86e162f19d3b0324e.jpg|16|http://bl.ocks.org/rkirsling/5001347^0|0|0|0|4|0|0|0|0|1|1|0|0|3|1L|2|0|0|0|7|3|0|0|0|1|4|0|0|3|1B|5|0|0|0|7|6|0|0|0|0|1|7|0|0|3|27|8|0|0|0|0|1|9|0|0|3|27|A|0|0|0|6|B|0|0|0|1|C|0|0|D|3|D|0|0|0|5|E|0|0|0|1|F|0|0|3|10|G|0|0|2|0|0|0|0|0|0|0|7|0|0|6|0^^$0|@$1|2|3|4|5|6|7|3P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|3Q|8|@]|9|@]|A|$]]|$1|E|3|F|5|6|7|3R|8|@]|9|@$G|3S|H|3T|1|3U]]|A|$]]|$1|I|3|J|5|6|7|3V|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|3W|8|@]|9|@$G|3X|H|3Y|1|3Z]]|A|$]]|$1|N|3|J|5|6|7|40|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|41|8|@]|9|@$G|42|H|43|1|44]]|A|$]]|$1|Q|3|R|5|D|7|45|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|46|8|@]|9|@$G|47|H|48|1|49]]|A|$]]|$1|U|3|J|5|6|7|4A|8|@]|9|@]|A|$]]|$1|V|3|L|5|M|7|4B|8|@]|9|@$G|4C|H|4D|1|4E]]|A|$]]|$1|W|3|J|5|6|7|4F|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|4G|8|@]|9|@$G|4H|H|4I|1|4J]]|A|$]]|$1|Z|3|10|5|D|7|4K|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|4L|8|@]|9|@$G|4M|H|4N|1|4O]]|A|$]]|$1|13|3|14|5|6|7|4P|8|@]|9|@]|A|$]]|$1|15|3|J|5|6|7|4Q|8|@]|9|@]|A|$]]|$1|16|3|L|5|M|7|4R|8|@]|9|@$G|4S|H|4T|1|4U]]|A|$]]|$1|17|3|J|5|6|7|4V|8|@]|9|@]|A|$]]|$1|18|3|19|5|6|7|4W|8|@]|9|@$G|4X|H|4Y|1|4Z]]|A|$]]|$1|1A|3|1B|5|6|7|50|8|@]|9|@]|A|$]]|$1|1C|3|J|5|6|7|51|8|@]|9|@]|A|$]]|$1|1D|3|L|5|M|7|52|8|@]|9|@$G|53|H|54|1|55]]|A|$]]|$1|1E|3|J|5|6|7|56|8|@]|9|@]|A|$]]|$1|1F|3|1G|5|6|7|57|8|@]|9|@$G|58|H|59|1|5A]]|A|$]]|$1|1H|3|1I|5|D|7|5B|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|5C|8|@]|9|@$G|5D|H|5E|1|5F]]|A|$]]|$1|1L|3|J|5|6|7|5G|8|@]|9|@]|A|$]]|$1|1M|3|L|5|M|7|5H|8|@]|9|@$G|5I|H|5J|1|5K]]|A|$]]|$1|1N|3|J|5|6|7|5L|8|@]|9|@]|A|$]]|$1|1O|3|1P|5|6|7|5M|8|@]|9|@$G|5N|H|5O|1|5P]]|A|$]]|$1|1Q|3|1R|5|D|7|5Q|8|@]|9|@]|A|$]]|$1|1S|3|1T|5|6|7|5R|8|@]|9|@$G|5S|H|5T|1|5U]]|A|$]]|$1|1U|3|J|5|6|7|5V|8|@]|9|@]|A|$]]|$1|1V|3|L|5|M|7|5W|8|@]|9|@$G|5X|H|5Y|1|5Z]]|A|$]]|$1|1W|3|J|5|6|7|60|8|@]|9|@]|A|$]]|$1|1X|3|1Y|5|6|7|61|8|@]|9|@$G|62|H|63|1|64]]|A|$]]|$1|1Z|3|20|5|6|7|65|8|@$G|66|H|67|21|22]]|9|@]|A|$]]|$1|23|3|24|5|6|7|68|8|@]|9|@]|A|$]]|$1|25|3|26|5|6|7|69|8|@]|9|@]|A|$]]|$1|27|3|28|5|6|7|6A|8|@]|9|@]|A|$]]|$1|29|3|2A|5|6|7|6B|8|@]|9|@]|A|$]]|$1|2B|3|2C|5|6|7|6C|8|@]|9|@]|A|$]]|$1|2D|3|2E|5|6|7|6D|8|@$G|6E|H|6F|21|22]]|9|@]|A|$]]|$1|2F|3|2G|5|6|7|6G|8|@$G|6H|H|6I|21|22]]|9|@]|A|$]]|$1|2H|3|-4|5|6|7|6J|8|@]|9|@]|A|$]]]|2I|$2J|$5|2K|2L|2M|A|$2N|2O]]|2P|$5|2Q|2L|2R|A|$2S|2T|2U|-4]]|2V|$5|2K|2L|2M|A|$2N|2W]]|2X|$5|2K|2L|2M|A|$2N|2Y]]|2Z|$5|2Q|2L|2R|A|$2S|30|2U|-4]]|31|$5|2K|2L|2M|A|$2N|32]]|33|$5|2K|2L|2M|A|$2N|34]]|35|$5|2Q|2L|2R|A|$2S|36|2U|-4]]|37|$5|2K|2L|2M|A|$2N|38]]|39|$5|2Q|2L|2R|A|$2S|3A|2U|-4]]|3B|$5|2K|2L|2M|A|$2N|3C]]|3D|$5|2K|2L|2M|A|$2N|3E]]|3F|$5|2Q|2L|2R|A|$2S|3G|2U|-4]]|3H|$5|2K|2L|2M|A|$2N|3I]]|3J|$5|2K|2L|2M|A|$2N|3K]]|3L|$5|2Q|2L|2R|A|$2S|3M|2U|-4]]|3N|$5|2K|2L|2M|A|$2N|3O]]]]

We can be accomplishing this task with some HTML 5 related UI frameworks which can visualize interactive graphs (user can create, update, read, and delete the graph elements). Some of them are as follow,

<ul>
<li>GoJS</li>
</ul>

<a href="https://gojs.net/latest/index.html" rel="nofollow noreferrer">GoJS</a> is a feature-rich JavaScript library for implementing custom interactive diagrams and complex visualizations across modern web browsers and platforms. 
The library makes constructing JavaScript diagrams of complex nodes, links, and groups easy with customizable templates and layouts.
Commercial license.

<a href="https://i.stack.imgur.com/KQ57E.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KQ57E.jpg" alt="enter image description here"></a>

source: <a href="https://gojs.net/latest/extensions/SnapLinkReshaping.html" rel="nofollow noreferrer">https://gojs.net/latest/extensions/SnapLinkReshaping.html</a>

<ul>
<li>JointJS</li>
</ul>

<a href="https://www.jointjs.com/" rel="nofollow noreferrer">JointJS</a> is a modern HTML 5 JavaScript library for visualization and interaction with diagrams and graphs.
It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools such as workflow editors, 
process management tools, IVR systems, API integrators, presentational applications and more. Licensed under both Open Source license (fewer features) and Commercial license (more features).

<a href="https://i.stack.imgur.com/b5FCL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b5FCL.jpg" alt="enter image description here"></a>

source: <a href="https://resources.jointjs.com/demos/kitchensink" rel="nofollow noreferrer">https://resources.jointjs.com/demos/kitchensink</a>

<ul>
<li>mxGraph</li>
</ul>

<a href="https://jgraph.github.io/mxgraph/" rel="nofollow noreferrer">mxGraph</a> is a JavaScript diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser. 
Under the Apache license 2.0 (free and open source).
Support for JavaScript, Java, .NET, and PHP.

1) mxDraw 

<a href="https://i.stack.imgur.com/3shJZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3shJZ.jpg" alt="enter image description here"></a>

source: <a href="https://jgraph.github.io/mxgraph/javascript/examples/editors/diagrameditor.html" rel="nofollow noreferrer">https://jgraph.github.io/mxgraph/javascript/examples/editors/diagrameditor.html</a>

2) Graph Editor

<a href="https://i.stack.imgur.com/t5RQd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t5RQd.jpg" alt="enter image description here"></a>

source: <a href="https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html" rel="nofollow noreferrer">https://jgraph.github.io/mxgraph/javascript/examples/grapheditor/www/index.html</a>

<ul>
<li>vis.js</li>
</ul>

<a href="http://visjs.org/" rel="nofollow noreferrer">vis.js</a> is a dynamic, browser-based visualization library. 
The library is designed to be easy to use, to handle large amounts of dynamic data, and to enable manipulation of and interaction with the data.
Licensed under both Apache 2.0 (free and open source) and MIT (open source license).

<a href="https://i.stack.imgur.com/rqEWs.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rqEWs.jpg" alt="enter image description here"></a>

source: vis.js <a href="https://github.com/almende/vis/archive/v4.20.1.zip" rel="nofollow noreferrer">library</a>

<ul>
<li>D3.js</li>
</ul>

<a href="https://d3js.org/" rel="nofollow noreferrer">D3.js</a> is a JavaScript library for manipulating documents based on data. 
D3 brings data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers,
combining powerful visualization components and a data-driven approach to DOM manipulation. 
Under the BSD license (open source initiative).

<a href="https://i.stack.imgur.com/1JJcN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1JJcN.jpg" alt="enter image description here"></a>

source: <a href="http://bl.ocks.org/rkirsling/5001347" rel="nofollow noreferrer">http://bl.ocks.org/rkirsling/5001347</a>

Conclusion

According to the features of GoJS, it is the most convenient framework for visualizing interactive graphs, 
because UI can customize easily and can save the Diagram Model as JSON format. 
But this is under the commercial license ($2995 per developer).

JointJS provides fewer features with their open source license version, 
therefore needs to purchase the commercial version for fulfilling our requirements.
It may be difficult to customize their complex UI. 

D3.js is more user-friendly but we have to proceed more effort to fine-tune it according to our requirements such as, 
proceed the node creation via a tool icon, enable the user to customize the node’s caption value, remove some existing visual effects, etc. 
Needs to explore about the saving format (JSON, XML, TXT, etc.) of Diagram Model.

According to my conclusion, we can choose either mxGraph or vis.js JavaScript library for our developments.

mxGraph: It seems we can easily customize the ‘mxDraw’ (web 2.0-style diagram editor) drawing application and reuse it.
 ‘Graph Editor’ diagram editor application is more advanced and it may take more time to customize it and needs to explore about the Diagram Model saving format.

vis.js: Is more user-friendly than ‘mxGraph’ but we may have to spend some development effort for exploring about Diagram Model saving format and removing existing visual effects.

I suppose to develop a network management REST client with topology diagram (as an image showing below). With that application, the user should able to create a topology diagram by drag and drop, change the nodes positions by dragging, edit nodes properties and delete node elements. 

Now I'm doing some feasibility study how can I approach this task with HTML 5 client or Java thick client. I have seen some API called <a href="https://www.esri.com/en-us/home" rel="nofollow noreferrer">esri</a> but it is commercialised.

I have planned to develop this application Angularjs or JavaFX. But none of them has inbuild libraries for it (I'm more preferring to develop this client application with AngularJs). Could you please help me to find any JavaScript frameworks or Java libraries available for accomplishing this task (then I can integrate them with AngularJs or JavaFX). 

I have seen similar kind of <a href="https://stackoverflow.com/questions/13398572/how-to-create-a-topology-diagram-using-javascript">question</a> at StackOverflow, it was too old but now it can be available new frameworks. 

Thanks

<a href="https://i.stack.imgur.com/cWKwF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cWKwF.png" alt="Topology diagram"></a>

REST Client application with Topology diagram

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我打算用拓扑图开发一个网络管理REST客户端(如下图所示)。使用该应用程序，用户应该能够通过拖放创建拓扑图，通过拖动更改节点位置，编辑节点属性和删除节点元素。现在，我正在进行一些可行性研究，如何使用HTML 5客户端或Java厚客户端来完成这项任务。我见过一些叫做的API，但是它已经商业化了。我计划开发这个应用程序An...

基于拓扑图的REST客户端应用程序-腾讯云开发者社区-腾讯云

问基于拓扑图的REST客户端应用程序
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于拓扑图的REST客户端应用程序EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于拓扑图的REST客户端应用程序
EN