jtopojs插件绘制⽹络拓扑图⼀、实现的功能
1、拓扑的基本绘制
2、拓扑放射性布局
3、多级拓扑的实现
4、下级拓扑节点的隐藏与展现
5、导出拓扑图
⼆、效果图展⽰
正常展⽰：
节点收缩展⽰：
三、引⼊库（稍作可以直接复⽤）
1、引⼊jQuery，jquery.js
2、引⼊jtopo插件jtopo-0.4.8.js
3、⽀持IE8，excanvas.js
四、前端代码
javascript全局数组在实现节点隐藏于展⽰过程中，实现⽅法可能不够好，问题如下：
1、⽽且使⽤全局数组（⽤来存储隐藏的节点），重新展⽰后全局数组⾥⾯的数据⽆法删除，因为不敢保证所有节点同时展⽰与收缩，因此使⽤的是当重新展⽰后，把重新展⽰的节点对象⽤对应的数字替换数组中的位置，这样保证再次隐藏的时候数组能够重新添加。有的⼈可能会问既然可能会第⼆次隐藏，那为什么要把存在数组中的对应的展⽰的节点对象删除呢？那是为了防⽌当重复再节点上添加相同的节点。（改进思路，⽤拓扑对象的outLinks属性作为增删的校验）
2、判断节点点击展⽰或隐藏的⽅法待改进，我采⽤的是数字计数法，缺陷就是⼀次或两次有效（改进思路，暂⽆）
3、js代码：
<script type="text/javascript">
var ip = '10.0.1.254';
var id = <%=Parameter("id")%>; //
var array = new Array();
var count = 1;
$(document).ready(function(){
$.ajax({
type:'post',
url:'${basePath}JtopoController/JtopoNew.do?ip='+ip+'&id='+1+"&isInter=yes",
dataType:"json",
async:false,
success:function (obj){
console.info(obj);
nodes=eval(obj);
console.info(nodes);
var canvas =ElementById('canvas');
//初始化画布
var stage;
}
});
initScene();
});
function createCloudNode(){ //绘制核⼼拓扑
var cloudNode = new JTopo.Node();
cloudNode.setSize(39,36);
cloudNode.setImage("jiaohuanji.png");
cloudNode.setLocation(1000,1000);
<=ip;
cloudNode.font= "20px Consolas";
cloudNode.fontColor = "555,555,0";
return cloudNode;
}
function initScene(){//初始化场景
stage=new JTopo.Stage(canvas);
//显⽰⼯具栏
//showJTopoToobar(stage);click
scene =new JTopo.Scene(stage);
scene.alpha=1;
scene.backgroundColor="#C8C8C8";
var cloudNode;
scene.add(cloudNode);
drawTopo(nodes,cloudNode);
scene.addEventListener("click", eventHandler);
}
function compare(vv){ //扫描当前点击拓扑是否在数组中
var strV = vv.text.substring(lastIndexOf("."))+".";
var str = "";
var flag = false;
try{
for(var m=0;m<array.length;m++){
str += array[m].text;
}
}catch(e){
}
ains(strV)){
flag = true;
}
return flag;
}
function eventHandler(){ //jtopo的点击事件
var node2 = DisplayedNodes();
var cnode ;
var outlinksCount;
for(var i=1;i<node2.length;i++){
if(node2[i].selected){
outlinksCount = node2[i].outLinks.length;
count ++;
cnode = node2[i];//得到选中的节点
}
}
//如果数组不为空并且数组中存在该被选择节点所在⽹段的元素则恢复
if(array != null&&array.length>=1&&compare(cnode) && count%2==0){
if(outlinksCount == 0){
//alert("add");
//var node = Item("cloudenodetext");
//veItem("cloudenodetext");
for(var m=0;m<array.length;m++){
if(array[m] != m){
if(array[m].text.substring(lastIndexOf("."))+".")!=-1){ //添加之前，需要先判断节点上是否有该⽹段的节点，如果没有，再添加。
//将数组中存在的添加到节点上
scene.add(array[m]);
scene.add(new JTopo.Link(cnode, array[m]));
//每次增加后需要删除该元素
array[m] = m;
}
}
}
}
}else{//如果为空或者被数组中不存在被选中的节点所在的⽹段的节点则进⾏删除
for(var i=1;i<node2.length;i++){
if(node2[i].selected){
if(outlinksCount > 0){
for(var j=1;j<node2.length;j++){
if(node2[j].ains(node2[i].text.substring(0,node2[i].text.lastIndexOf("."))+".")){ if(node2[j]!=node2[i] && node2[j]!=null && node2[j]!=undefined && node2[j]!=""){ if(isNotInArr(node2[j].text)){
array.push(node2[j]);
}
window.sessionStorage.setItem("cloudenodetext",node2[i].text);
}
}
}
}
}
}
}
}
//判断是否在数组中
function isNotInArr(node){
//alert(".....is not node ");
var str = "";
var flag = false;
if (array==null||array.length==0)
return true;
for(var i=0;i<array.length;i++){
str += array[i].text;
}
if(!ains(node)){
//alert("in here。。");
flag = true;
}
return flag;
}
function addNode(name,x,y,cloudNode){ //将⽣产的单个拓扑加⼊到scence中
var node = new JTopo.Node();
node.setSize(7, 7);
node.setLocation(x,y);
node.setImage("tp_node.png");
<=name;
dragable:true;
node.fontColor = "219,118,39";
scene.add(node);
var link = new JTopo.Link(cloudNode,node);
link.strokeColor = "128,64,64";
scene.add(link);
return node;
}
function drawTopo(nodes,cloudNode){ // 绘制拓扑
for(var i=0;i&delist.length;i++){
var nd = delist[i].delist[i].pt.delist[i].pt.y,cloudNode);
JTopo.layout.layoutNode(scene,cloudNode,true);
delist[i],nd);
}
}
function exportImage(){ //导出图⽚
stage.saveImageInfo();
}
</script>
HTML：
<body >
<div>
<div id="lookAll" ><button οnclick="exportImage();">导出成图⽚</button></div>
<div id="content" >
<canvas width="3000" height="3000" id="canvas" ></canvas>
</div>
</div>
</body>
4、json格式：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论