最近一直在研究拓扑图，项目上推荐了jTopo，也就顺带研究了一番。根据官网描述，jTopo是一款完全基于HTML5 Canvas的关系、拓扑图形化界面开发工具包。本人也基于jTopo做了一个简单的交换机相关信息展示的拓扑图，要求能实时显示每个节点的流量信息，告警信息，连线通过不同颜色展示，同比环比趋势图等。
使用过程中，觉得jTopo方便的地方有：
1、只依赖jquery，很轻量，仅仅只有几十KB，性能上还不错。
2、自己简单写个样例就能上手，很容易，官方有覆盖比较全的demo，实现的样例也还过得去。
3、拓扑图常用的功能如连线、容器分组、动画效果、告警、鹰眼，能直接拿来使用，我比较喜欢。
样例就不在这里具体叙述，可以自行前往官网查看。这里，主要重点记录使用过程中花费我大量时间研究和定制的功能。
1、不支持界面自动布局。每个节点放置的位置都需要代码去设置横纵坐标，这就牵涉到我们需要自己去根据屏幕宽度、图片宽高等，采用动态算法去实现页面布局，这个是很需要耐心去研究，包括一个像素点都有可能导致整个图不居中。
比如，计算交换机图片位置，就需要根据不同情况，自己判断。
var offsetX = 0;
var switchNode1 = "";
if(1==switchnum){
offsetX = (inWidth-switchPicWidth)*0.5;
}else if(k==0){
offsetX = alarmWidth*0.5+5;
}else if(k==switchnum-1){
offsetX = k*((inWidth-switchnum*switchPicWidth)/(switchnum-1))+switchPicWidth*k-alarmWidth*0.5-5;
}else{
offsetX = k*((inWidth-switchnum*switchPicWidth-alarmWidth)/(switchnum-1))+switchPicWidth*k+alarmWidth*0.5; }
var switchNode1 = addNode(switchNodes[k].name,"router.png",offsetX,inHeight*(4/5));2、不方便获取节点对象。因为使用的是html5的canvas，没有节点id，不能像平时界面直接获取id那样获取，定位元素调试不太方便。
var nodes = stage.find("node"); //把所有的node找到,包括根节点
if(nodes.length>0){
$.each(nodes,function(i,n){
if(n.image.getAttribute("src").indexOf("switch") !=-1) {
scene.remove(n);
}
});
}
3、我们是通过悬浮框来显示实时信息。但jTopo没有现成的悬浮框，需要自己定制实现，同时还要考虑显示换行、靠边翻转等，工作量不小。 具体样例就不写了，可以到网上找一些悬浮框的例子样式增加即可。
4、告警图片变色。这个功能我觉得是jTopo很不错的功能，可以解决增加常规告警图片切换。
var addAlarm = function(node,color,alarminfo) {
node.alarmColor = color;
node.alarm = alarminfo;
node.alarmAlpha = 0.9;
};最后再吐槽一下，jTopo的文档真的不够详细，常见的Api都是通过demo来学习，如果案例中没有的话，那就有点盲人摸象的感觉，只能自己慢慢摸索，很让人痛苦。另外还需要注意一点，jTopo属于GPL协议，不能用于商业项目，所以我们还在考虑替代方法。
