Skip to content
/ ctopo Public
forked from tm-roamer/ctopo

canvas版的拓扑图(topo)展示工具(停止维护)

0 stars 38 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

SunInfoFE/ctopo

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
css
css
 
 
demo
demo
 
 
image
image
 
 
src
src
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 

Repository files navigation

ctopo

canvas版的拓扑图(topo)展示工具.

起因

总在使用别人的开源插件来绘制拓扑,总是不能满足公司各个项目的各种需求,痛定思痛自己搞一套吧.

ps: 感谢UI设计师yoki对topo图做的UI设计,很赞!!!

ps: 因为ff,chrome不支持本地请求json文件, 将整体工程放到本服务器下运行最为适宜.

适用场景和环境

(1)适用于监控网络ip节点互联关系的场景
(2)适用于社交网络的群组互联访问关系

兼容性

ie9+,firefox,chrome,safari.

性能说明

300+节点毫无压力,顺畅的没有朋友,正常使用尽量控制在300左右.

节点的碰撞检测5千节点1ms左右,连线的碰撞检测5千连线1ms左右,(ff,chrome一样)

如果需要展示上千节点请参考以下调优方案

调优方案参考

(1)将力导向布局的迭代次数从300次下降到150次,布局时间缩小一倍,例:10s---优化后5s
(2)将布局算法放在后台执行,将前台布局设置为[预设],按java举例,例:10s---优化后2s
(3)将节点的显示标签Label隐藏,下面列举了绘制label的性能影响,例:10s---优化后3s
(4)用空间换时间,将坐标保留,不用每次draw都要重新计算布局

ps: 绘制节点标签还是挺吃性能的

绘制节点不带label
	//ff     (浏览器卡死, 建议使用服务器端计算)
	//chrome nodes count=1000,edges count=1000,layout time=4838,draw time=9

	//ff     nodes count=500,edges count=500,layout time=9543,draw time=19
	//chrome nodes count=500,edges count=500,layout time=1272,draw time=6

	//ff     nodes count=300,edges count=300,layout time=3445,draw time=11
	//chrome nodes count=300,edges count=300,layout time=475,draw time=4

	//ff     nodes count=200,edges count=200,layout time=1551,draw time=7
	//chrome nodes count=200,edges count=200,layout time=233,draw time=4

绘制节点带label
	//ff     (浏览器卡死, 建议使用服务器端计算)
	//chrome nodes count=1000,edges count=1000,layout time=4838,draw time=39

	//ff     nodes count=500,edges count=500,layout time=9543,draw time=125
	//chrome nodes count=500,edges count=500,layout time=1272,draw time=23

	//ff     nodes count=300,edges count=300,layout time=3445,draw time=77
	//chrome nodes count=300,edges count=300,layout time=475,draw time=16

	//ff     nodes count=200,edges count=200,layout time=1551,draw time=49
	//chrome nodes count=200,edges count=200,layout time=233,draw time=10

缺点

(1)力导向布局算法性能差一点,还需要进一步优化
(2)不支持节点图片和图标
(3)不支持框选操作

特性

(1)提供控制面板;
(2)支持鼠标滑轮和拖拽的放大,缩小;
(3)上下左右键盘平移;
(4)拖拽单个节点和屏幕;
(5)支持点击和悬停节点;
(6)支持点击和悬停连线;
(7)支持悬停节点的关联节点高亮;
(8)提供事件回调接口;
(9)支持连线箭头;
(10)支持连线的流动动画;
(11)支持力导向布局定位,即每次刷新页面,坐标不变;

实现原理

(1)使用html5的canvas标签来实现的;
(2)布局算法使用力导向布局(库仑斥力公式和胡克定律公式)来自网络;
(3)节点的碰撞检测使用勾股定理测距;
(4)连线的碰撞检测使用反正切计算夹角;

界面展示

github github

版权

MIT(随意使用,免费开源)

基础实例

	<!DOCTYPE html>
	<html lang="zh">
	    <head>
	      <meta charset="UTF-8">
	      <title></title>
	    </head>
	    <body>
	      <canvas id="canvas"></canvas>
	      <script type="text/javascript" src="ctopo.js"></script>
	      <script type="text/javascript">
	        //调用ctopo
	        ctopo({
			      id:"canvas",    //说明: canvas标签的id,     写法: canvas , #canvas
			      width:"auto",   //说明: canvas的宽度,       写法: 500,500px,50%,auto 
			      height:"auto",  //说明: canvas的高度,       写法: 500,500px,50%,auto
			      style:{	      //说明: 样式省略了.....
				      global:{},
				      node:{},
				      edge:{}
			      },
			      layout:{},      //说明: 布局省略了.....
			      data:{},	      //说明: 数据省略了.....
			      event:{}	      //说明: 事件回调省略了.....
			    });
	      </script>
	    </body>
	</html>

api接口

使用方法

	//取得ctopo对象, 点出api方法即可
	var ctopo = ctopo({..各种基础配置..});
	var nodeA = ctopo.node("1108"); //获取节点A
	var nodeB = ctopo.node("0724"); //获取节点B
	var edge = ctopo.edge("1108","0724"); //获取连线

属性和方法

属性名描述
version版本
option配置对象
canvas画布对象
context画布上下文对象
nodes节点数组
edges连线对象
方法名描述参数返回值
addEdge(edge,isDrawNow) 添加连线 参数1:
edge添加的连线对象
参数2:
isDrawNow是否立刻渲染到屏幕 		空
addNode(node,isDrawNow) 添加节点 参数1:
edge添加的节点对象
参数2:
isDrawNow是否立刻渲染到屏幕 		空
draw(option) 重新绘制画布,
用法等于ctopo(option)		 参数1:
option初始的配置对象 		空
drawData(data,isApplyLayout) 局部刷新,只刷新数据 参数1:
data格式=optioin.data
参数2:
isApplyLayout是否重新应用布局 		成功true,失败false
edge(sid,tid) 取得连线对象
ps:区分方向 		参数1:
开始节点id
参数2:
结束节点id 		查到: 连线对象
没查到: null
edgeArray() 取得所有的连线对象数组 无 连线对象数组
firstNeighbors(nid) 返回与之关联的连线和节点数组对象 参数1:
nid待匹配的节点id 		查到:关联数据对象;
没查到:空数组对象
{
edgeNeighbors:[],
nodeNeighbors:[]
}
layout(layout) 重置切换布局 (可选)参数1:
layout==option.layout 		无参数:
返回option.layout
有参数:
重置布局,
成功true,失败false
node(id) 取得节点对象 参数1:
节点id 		查到:节点对象
没查到:null
nodeLabelsVisible(visible) 设置节点标签是否显示 参数1:
visible是否显示标签,
布尔型true,false 		空
edgeLabelsVisible(visible) 设置连线标签是否显示 参数1:
visible是否显示标签,
布尔型true,false 		空
edgeArrowsVisible(visible) 设置连线箭头是否显示 参数1:
visible是否显示箭头,
布尔型true,false 		空
nodeArray() 取得所有节点对象数组 无 节点对象数组
nodeTooltipsVisible(visible) 设置节点提示框是否显示 参数1:
visible是否显示提示框,
布尔型true,false 		空
edgeTooltipsVisible(visible) 设置连线提示框是否显示 参数1:
visible是否显示提示框,
布尔型true,false 		空
edgeAnimateBallsVisible(visible) 设置连线动画球是否显示 参数1:
visible是否显示动画球,
布尔型true,false 		空
consolePanelVisible(visible) 设置控制台是否显示 参数1:
visible是否显示控制台,
布尔型true,false 		空
removeEdge(sid,tid,isDrawNow) 删除连线 参数1:
开始节点id
参数2:
结束节点id
参数3:
是否立刻渲染到屏幕 		空
removeNode(id,isDrawNow) 删除节点,与之关联的线也删除 参数1:
节点id
参数2:
是否立刻渲染到屏幕 		空
updateEdge(edge,isDrawNow) 更新连线 参数1:
连线对象
参数3:
是否立刻渲染到屏幕 		空
updateNode(node,isDrawNow) 更新节点 参数1:
节点对象
参数2:
是否立刻渲染到屏幕 		空
style(style) 重置切换样式 (可选)参数1:
style==option.style 		无参数:
返回option.style 有参数:
重置样式,
成功true,失败false
zoom(scale) 设置缩放比例(0-1) (可选)参数1:
scale比例0-1,100%=0.5
 无参数:
返回比例值
有参数:
设置比例值,
成功ture,失败false

About

canvas版的拓扑图(topo)展示工具(停止维护)

Resources

Readme
Activity
Custom properties

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 95.9%
  • CSS 4.1%