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

jopen 9年前

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

项目主页:http://www.open-open.com/lib/view/home/1429836598229