Question

用HTML+CSS+JS如何 动态绘制 网络拓扑图?

该拓扑“图”中可以有交互的哦（比如mouseover可以显示该节点信息）
请简要提供一个解决方案。

用过canvas的朋友也请表示一下能实现吗？

Answer 1

1.各个应用系统、服务器信息及系统直接的调用都录入到数据库中
2.前端拓扑图、或系统调用关系图的展示UI可以通过一些选项从数据库中捞出数据，然后在UI上动态绘制出关系图来
3.如HTML5 Canvas或基于HTML5 Canvas的JTopo、SVG都可以很好的绘制出这种图来。

Answer 2

网络拓扑图，这种复杂的东西，自己写肯定没戏。不过现在大多基于html5有开源的包；
比如说jTopo工具包：http://www.open-open.com/lib/view/open1380205212914.html
Graph.Editor开源包：http://segmentfault.com/a/1190000002493968
演示地址：http://demo.qunee.com/editor/（看样子还不错）
也不知道，你什么项目会用到这些，安装个office visio也是可以嘛。

Answer 3

用 js 实现太不现实了，好像没有人做过，建议用svg 嵌入到html中

Answer 4

网络拓扑图 要自己用 js 写重用性还是相对较低的，建议还是用用第三方的插件，随便百度一搜“html5 网络拓扑图”就出现一大堆可参考的文章和例子：

点进去看了几篇，仔细看了一下，应该这个博客是原主人，可以关注一下，内容讲解上还是蛮详细，这篇比较有代表性，参考看看：网页链接