39,118
社区成员
发帖
与我相关
我的任务
分享如何使用HTML5 Canvas动态的绘制拓扑图
大家好，最近想实现一个功能大致如下：
1.各个应用系统、服务器信息及系统直接的调用都录入到数据库中
2.前端拓扑图、或系统调用关系图的展示UI可以通过一些选项从数据库中捞出数据，然后在UI上动态绘制出关系图来
网上查了下如HTML5 Canvas或基于HTML5 Canvas的JTopo、SVG都可以很好的绘制出这种图来，但现在有个疑问就是：
绘制这些图都需要为每个节点指定的UI中的位置(坐标)，那我应该怎么动态的指定这些节点的位置呢，而使得图生成之后不会有重叠，也比较好看
(像使用dot这种描述行绘制流程图很简单，只需要定义好节点及连接关系，它自动会按最简介的策略把流程出绘制出来，开发人员就不需要关系个节点的布局、位置摆放
http://zh.wikipedia.org/wiki/DOT%E8%AF%AD%E8%A8%80
不知大家有什么建议或技巧，望指导。。。
1.各个应用系统、服务器信息及系统直接的调用都录入到数据库中
2.前端拓扑图、或系统调用关系图的展示UI可以通过一些选项从数据库中捞出数据，然后在UI上动态绘制出关系图来
网上查了下如HTML5 Canvas或基于HTML5 Canvas的JTopo、SVG都可以很好的绘制出这种图来，但现在有个疑问就是：
绘制这些图都需要为每个节点指定的UI中的位置(坐标)，那我应该怎么动态的指定这些节点的位置呢，而使得图生成之后不会有重叠，也比较好看
(像使用dot这种描述行绘制流程图很简单，只需要定义好节点及连接关系，它自动会按最简介的策略把流程出绘制出来，开发人员就不需要关系个节点的布局、位置摆放
http://zh.wikipedia.org/wiki/DOT%E8%AF%AD%E8%A8%80
不知大家有什么建议或技巧，望指导。。。
...全文
请发表友善的回复…
发表回复
业余草 2017-07-05
- 打赏
- 举报
光脚丫思考 2017-07-05
- 打赏
- 举报
这个功能也是我非常需要的，楼主不知道紧张如何？
哎！2014年的帖子，17年估计是石沉大海了！^_^
图扑软件 2016-08-10
- 打赏
- 举报
http://www.hightopo.com/demos/index.html
一堆的 HTML5 拓扑图例子供参考
一堆的 HTML5 拓扑图例子供参考
业余草 2016-05-19
- 打赏
- 举报
昭zzz 2016-05-19
- 打赏
- 举报
jtopo 的布局貌似没有多少文档说明呀
z783370513 2015-12-04
- 打赏
- 举报
楼主留个联系方式吧，我最近也在实现你说的这个功能
TWaver数字孪生 2015-05-08
- 打赏
- 举报
可以参考下twaver做的拓扑流程图：用拓扑图呈现多层级关系图
TWaver之可伸展流程图
TWaver之可伸展流程图
业余草 2015-04-09
- 打赏
- 举报
HT for Web
可以考虑一下！
tingyktwj12 2015-04-07
- 打赏
- 举报
dec_nono 2015-01-13
- 打赏
- 举报
请问LZ解决问了吗~我正好也需要这个功能
图扑软件 2014-12-23
- 打赏
- 举报
Errorize 2014-11-13
- 打赏
- 举报
请问你结贴了吗？使用Jtopo就可以。
zeldazld 2014-10-23
- 打赏
- 举报
刚在度娘找了个Dagre-D3，看上去有点接近，在仔细研究下
http://my.oschina.net/blogshi/blog/221749?p={{totalPage}}
欢迎大家推荐、指导
zeldazld 2014-10-23
- 打赏
- 举报
非常感谢您的回复，百度图表(ECharts)对于图表类实现很炫，但对于流程图的绘制似乎还不是去想要的
zeldazld 2014-10-23
- 打赏
- 举报
非常感谢您的回复，大致看了下SVG-edit - Google Code好像是个编辑器，我需要的就根据数据流自动绘制流程图
业余草 2014-10-23
- 打赏
- 举报
看看百度图表插件，是否对你有一定的帮助！！！！！！！！！！！
业余草 2014-10-23
- 打赏
- 举报
仔细研究，然后分享，共同学习！！！
save4me 2014-10-22
- 打赏
- 举报
开源项目SVG-edit - Google Code，希望能有帮助
