d3js网络拓扑关系特效可视化展现
d3js拓扑关系特效可视化展现
在上一篇d3js文档http://www.cnblogs.com/juandx/p/3959900.html中讲了简单的d3js方法和效果，现在我做一个完整的演示，使用d3js来展现动态可视化的网络拓扑效果图，希望对大家有所帮助。
<%= render partial: 'bar' %>
<style>
.table td{
text-align: center;
}
td .progress {
margin-bottom: 0;
width: 175px;
}
td .progress-text {
position: absolute;
width: 175px;
text-align: center;
}
.tdwidth{width:175px;}
.progress {
margin-bottom: 0;
width: 175px;
}
.progress-text {
position: absolute;
width: 175px;
text-align: center;
}
</style> <head>
<style type="text/css">
body
{
height: 100%;
}
</style>
<meta charset="utf-8">
<title>D3 Page Template</title>
<script type="text/javascript" src="d3/d3.js"></script>
</head>
<body>
<% vts_size = @vts.size %>
<% sts_size = @sts.size %>
<% stvs_size = @stvs.size %>
<% all_size = vts_size + sts_size + stvs_size %>
<% v_and_s = Array.new(all_size ) %>
<% for i in 0..sts_size-1 do %>
<% v_and_s[i] = @sts[i] %>
<% end %>
<% for i in sts_size..sts_size+vts_size-1 do %>
<% v_and_s[i] = @vts[i-sts_size] %>
<% end %>
<% for i in sts_size+vts_size..all_size do %>
<% v_and_s[i] = @vts[i-sts_size-vts_size] %>
<% end %> <svg width="200" height="100">
<circle cx="12" cy="10" r="10" fill="#FF3420"/>
<circle cx="12" cy="35" r="10" fill="#7FFF00"/>
<rect x="2" y="50" width="20" height="20" style="fill:#1E90FF" />
<text x="30" y="13" fill="black">switch</text>
<text x="30" y="39" fill="black">virtual switch</text>
<text x="30" y="64" fill="black">virtual machine</text>
</svg> <script type="text/javascript" charset="utf-8">
var w = 1200;
var h = 600;
var names = [];
var sts_size = <%= sts_size %>;
var vts_size = <%= vts_size %>;
var stvs_size = <%= stvs_size %>
var all_size = <%= all_size %>;
var i = 0;
var j = 0;
var k = 0;
var nodes = [];
var edges = [];
var sts1_array = new Array();
var sts1_used = new Array();
var all_array = new Array();
for(i = 0; i < sts_size/2; ++i)
{
all_array[i] = new Array();
}
//把sts表导成一个二维数组sts1_array
for(i = 0; i < sts_size; ++i)
{
sts1_array[i] = new Array();
sts1_used[i] = 0;
}
i = 0;
<% for i in 0..sts_size-1 do %>
sts1_array[i][0] = "<%= @sts[i].switch_name %>";
sts1_array[i][1] = "<%= @sts[i].port %>";
sts1_array[i][2] = "<%= @sts[i].next_hop_name %>";
++i;
<% end %>
var kk = sts1_array[0];
//把sts1_array搞成s的关系表放入all_array
i = 0;
j = 0;
k = 0;
for(i = 0; i < sts_size; ++i)
{
if(sts1_used[i] == 0)
{
var x1 = sts1_array[i];
var x2id = 0;
for(j = i+1; j < sts_size; ++j)
{
var x2 = sts1_array[j];
x2id = j;
if(x1[0] == x2[2] && x1[2] == x2[0])
{
sts1_used[i] = 1;
sts1_used[j] = 1;
break;
}
}
all_array[k][0] = x1[0];
all_array[k][1] = x1[0] + ":" + x1[1] + " to " + sts1_array[x2id][0] + ":" + sts1_array[x2id][1];
all_array[k][2] = x1[2];
++k;
}
}
//对all_array排序
all_array.sort(function(a,b)
{
if(a[0] > b[0])return 1;
else if(a[0] == b[0])return a[2]>b[2]?1:-1;
else return -1;
});
//把s放入hashtables里
var hashTable = new Object();
var ids = [];
var idnum = 0;
for(i = 0; i < sts_size/2; ++i)
{
var x1 = all_array[i];
if(x1[0] in hashTable){}
else
{
hashTable[x1[0]] = idnum++;
ids.push(x1[0]);
}
if(x1[2] in hashTable){continue;}
else
{
hashTable[x1[2]] = idnum++;
ids.push(x1[2]);
}
}
//把vts表导成一个二维数组放入all_array
for(i = sts_size/2; i < vts_size + sts_size/2; ++i)
{
all_array[i] = new Array();
}
<% for i in 0..vts_size-1 do %>
all_array[k][0] = "<%= @vts[i].vm_name %>";
all_array[k][2] = "<%= @vts[i].switch_name %>";
all_array[k][1] = all_array[k][2] + ":<%= @vts[i].port %> to " + all_array[k][0];
//把vm放入hashtables里
if(all_array[k][0] in hashTable){}
else
{
hashTable[all_array[k][0]] = idnum++;
ids.push(all_array[k][0]);
}
++k;
<% end %>
//把stvs表放入all_array
for(i = vts_size + sts_size/2; i < vts_size + sts_size/2 + stvs_size; ++i)
{
all_array[i] = new Array();
}
var hashTable2 = new Object();
<% for i in 0..stvs_size-1 do %>
all_array[k][0] = "<%= @stvs[i].switch %>";
all_array[k][1] = "<%= @stvs[i].type_s %>";
hashTable2[all_array[k][0]] = all_array[k][1];
++k;
<% end %>
//生成nodes
all_size = sts_size/2 + vts_size;
for(i = 0;i < idnum - vts_size; ++i)
{
var node1 =
{
"name": ids[i],
"type": "circle",
"switch_type": hashTable2[ids[i]]
};
nodes.push(node1);
}
for(i = idnum - vts_size;i < idnum; ++i)
{
var node1 =
{
"name": ids[i],
"type": "rect",
"switch_type": "rect"
};
nodes.push(node1);
}
//alert(nodes[1].name);
//生成edges 关系都在all_array中
for(i = 0 ; i < all_size; ++i)
{
var ss = hashTable[all_array[i][0]];
var tt = hashTable[all_array[i][2]];
var desc = all_array[i][1];
var edges1 =
{
"source": ss,
"target": tt,
"des": desc
};
edges.push(edges1);
}
//下面开始画图
var color = d3.scale.category20();
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var force2 = d3.layout.force()
.nodes(nodes)
.links(edges)
.size([w, h])
.linkDistance([130])
.charge([-2000])
.gravity(0.15);
force2.start();
var stroke_color = "black";
var stroke_width = "0.5";
var touch_stroke_color = "#9F5FBF";//紫色
var touch_stroke_width = "1";
var switch_color = "#FF3420"//红
var vswitch_color = "#7FFF00";//绿
var vm_color = "#1E90FF";//蓝
//edges
var edges2 = svg.selectAll("line")
.data(edges)
.enter()
.append("line")
.style("stroke", "#ccc")
.style("stroke-width", 2)
.call(force2.drag);
//link
var link2 = svg.selectAll("link");
link2 = link2.data(edges);
var linkEnter2 = link2.enter()
.append("g")
.attr("class","link")
.call(force2.drag);
linkEnter2.append("text")
.attr("dy", ".35em")
.text(function(d){ return d.des; });
//node
var node2 = svg.selectAll("node");
node2 = node2.data(nodes);
var nodeEnter2 = node2.enter()
.append("g")
.attr("class", "node")
.call(force2.drag);
nodeEnter2.append("circle")
.attr("r", function(d)
{
if(d.type == "circle") return 10;
else return 0;
})
.style("fill", function(d, i)
{
if(d.type == "circle")
{
if(d.switch_type == "1") return switch_color; else if(d.switch_type == "2") return vswitch_color;}
else if(d.type == "rect"){return vm_color;}
})
.on("mouseover", function(x,i) //鼠标移动到一个节点上时，将其及与其邻接的节点突出显示
{
node2.style("stroke",function(d) { if(d.index == x.index)return touch_stroke_color; })
.style("stroke-width", function(d) { if(d.index == x.index)return touch_stroke_width; }); link2.style("stroke", function(d) { if(d.source.index == x.index || d.target.index == x.index) return touch_stroke_color; })
.style("stroke-width", function(d) { if(d.source.index == x.index || d.target.index == x.index) return touch_stroke_width; }); svg.selectAll("text")
.style("fill",function(d) { if(d.index == x.index) return touch_stroke_color; })
.style("fill",function(d) { if(d.source.index == x.index || d.target.index == x.index) return touch_stroke_color; });
})
.on("mouseout", function() //鼠标离开时还原
{
node2.style("stroke-width","0");
node2.style("stroke", stroke_color);
link2.style("stroke", stroke_color);
link2.style("stroke-width","0");
svg.selectAll("text").style("fill","black");
}); nodeEnter2.append("rect")
.attr("width",function(d)
{
if(d.type == "rect") return 20;
else return 0;
})
.attr("height",function(d)
{
if(d.type == "rect") return 20;
else return 0;
})
.style("fill", function(d, i)
{
if(d.type == "circle")
{
if(d.switch_type == "1") return switch_color;
else if(d.switch_type == "2") return vswitch_color;
}
else if(d.type == "rect")
{
return vm_color;
}
})
.on("mouseover", function(x,i) //鼠标移动到一个节点上时，将其及与其邻接的节点突出显示
{
node2.style("stroke",function(d) { if(d.index == x.index)return touch_stroke_color; })
.style("stroke-width", function(d) { if(d.index == x.index)return touch_stroke_width; }); link2.style("stroke", function(d) { if(d.source.index == x.index || d.target.index == x.index) return touch_stroke_color; })
.style("stroke-width", function(d) { if(d.source.index == x.index || d.target.index == x.index) return touch_stroke_width; }); svg.selectAll("text")
.style("fill",function(d) { if(d.index == x.index) return touch_stroke_color; })
.style("fill",function(d) { if(d.source.index == x.index || d.target.index == x.index) return touch_stroke_color; });
})
.on("mouseout", function() //鼠标离开时还原
{
node2.style("stroke-width","0");
node2.style("stroke", stroke_color);
link2.style("stroke", stroke_color);
link2.style("stroke-width","0");
svg.selectAll("text").style("fill","black");
});
nodeEnter2.append("text")
.attr("dy", ".35em")
.text(function(d) { return d.name; })
.on("mouseover", function(x,i) //鼠标移动到一个节点上时，将其及与其邻接的节点突出显示
{
node2.style("stroke",function(d) { if(d.index == x.index)return touch_stroke_color; })
.style("stroke-width", function(d) { if(d.index == x.index)return touch_stroke_width; }); link2.style("stroke", function(d) { if(d.source.index == x.index || d.target.index == x.index) return touch_stroke_color; })
.style("stroke-width", function(d) { if(d.source.index == x.index || d.target.index == x.index) return touch_stroke_width; }); svg.selectAll("text")
.style("fill",function(d) { if(d.index == x.index) return touch_stroke_color; })
.style("fill",function(d) { if(d.source.index == x.index || d.target.index == x.index) return touch_stroke_color; });
})
.on("mouseout", function() //鼠标离开时还原
{
node2.style("stroke-width","0");
node2.style("stroke", stroke_color);
link2.style("stroke", stroke_color);
link2.style("stroke-width","0");
svg.selectAll("text").style("fill","black");
}); force2.on("tick", function()
{
edges2.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
link2.attr("transform", function(d) { return "translate(" + (d.source.x+d.target.x)/2 + "," + (d.source.y+d.target.y)/2 + ")"; });
node2.attr("transform", function(d)
{
if(d.type == "circle") return "translate(" + d.x + "," + d.y + ")";
else
{
var dx = parseFloat(d.x) - 10;
var dy = parseFloat(d.y) - 10;
return "translate(" + dx + "," + dy + ")";
}
});
});
</script>
</body>
最后移动鼠标就会高亮选择的地方
d3js网络拓扑关系特效可视化展现的更多相关文章
- bvlc_reference_caffenet网络权值可视化
一.网络结构 models/bvlc_reference_caffenet/deploy.prototxt 二.显示conv1的网络权值 clear; clc; close all; addpath( ...
- D3js初探及数据可视化案例设计实战
摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
- caffe深度学习网络(.prototxt)在线可视化工具：Netscope Editor
http://ethereon.github.io/netscope/#/editor 网址:http://ethereon.github.io/netscope/#/editor 将.prototx ...
- prometheus（3）之grafan可视化展现
可视化UI界面Grafana的安装和配置 Grafana介绍 Grafana是一个跨平台的开源的度量分析和可视化工具,可以将采集的数据可视化的展示,并及时通知给告警接收方.它主要有以下六大特点: 1. ...
- mnist全连接层网络权值可视化
一.数据准备 网络结构:lenet_lr.prototxt 训练好的模型:lenet_lr_iter_10000.caffemodel 下载地址:链接:https://pan.baidu.com/s/ ...
- 搭建一个简单的基于web的网络流量监控可视化系统
本文转载于我的个人博客,转载请标明出处. 初衷 在腾讯云的学生认证申请提交上去n天之后,终于得到了审批,所以迫不及待的想玩玩腾讯云,作为一个搞网络的,自然有一些关于网络应用的小玩意,所以把以前部署过的 ...
- Tensorflow学习教程------tensorboard网络运行和可视化
tensorboard可以将训练过程中的一些参数可视化,比如我们最关注的loss值和accuracy值,简单来说就是把这些值的变化记录在日志里,然后将日志里的这些数据可视化. 首先运行训练代码 #co ...
- VMware vRealize Network Insight 6.2 发布 - 网络和安全可视化分析
发现.优化应用安全性和网络连接解决方案并对其进行故障排除 VMware vRealize Network Insight 可帮助您跨混合和多云环境构建经过优化且高度可用的安全网络基础架构.它提供了网络 ...
- python读取excel数据，并可视化展现
#-*- coding: utf-8 -*- import pandas as pda import matplotlib.pyplot as pyl import matplotlib.font_m ...
随机推荐
- 关于android闹钟，设置定时提醒的一点心得
首先在设置提醒之前你需要一个入口,比如说onclick事件中,在此不做赘述. android中使用闹钟进行提醒其实非常简单,你只需要告知系统你想在什么时候被提醒,然后需要一个闹钟的广播接收器,当到你设 ...
- 解决修改计算机名后tfs连接不上的错误
1,用vs 自带的工具命令 tf workspaces 查看集合 2,执行命令: >tf workspaces /collection:https://aaaa.visualstudio.com ...
- 转 jmeter使用IP欺骗压力测试
jmeterIP 欺骗多IP 最近在使用jmeter进行压力测试时需要使用类似于loadrunner的IP欺骗功能,经问津度娘无果后决定再次耐心研究jmeter官方文 档,终于发现在jmeter2.5 ...
- WebDav的java客户端开发包：Jackrabbit
上一篇帖子“WebDav的java客户端开发包:sardine”中说到,对于开发WebDav客户端 sardine是一个很好的选择,但sardine并未实现WevDav的全部规范,所以我又试了试 ap ...
- 进程间通信机制（管道、信号、共享内存/信号量/消息队列）、线程间通信机制（互斥锁、条件变量、posix匿名信号量）
注:本分类下文章大多整理自<深入分析linux内核源代码>一书,另有参考其他一些资料如<linux内核完全剖析>.<linux c 编程一站式学习>等,只是为了更好 ...
- php - 时间操作
ini_set('date.timezone','Asia/Shanghai'); http://www.w3school.com.cn/php/func_date_strtotime.asp str ...
- 【iOS】自动引用计数 (循环引用)
历史版本 ARC(Automatic Reference Counting,自动引用计数)极大地减少了Cocoa开发中的常见编程错误:retain跟release不匹配.ARC并不会消除对retain ...
- [k8s]dashboard1.8.1搭建( heapster1.5+influxdb+grafana)
dashboard最终效果 多了执行sh的窗口 heapster+influxdb+grafana搭建 整个架构是 dashboard去检测 hepster service服务, heapster通过 ...
- [na]wireshark抓包排错-tcp.flags.reset
这是以前处理无线portal问题时候的一个梗. 一 抓包思路-用抓包来解决问题 ,了解协议交互大概过程 ,抓包 抓包法则: .最小化原则,过滤到想要的最小数据,别忽略上下文数据包 .对比法, 正常的包 ...
- Mingw opencv Windows下命令行运行
1.下载opencv 2.3 http://sourceforge.net/projects/opencvlibrary/files/ 下个opencv-win版本吧 至于版本号就随意吧,我选的是2. ...