首页 > 代码库 > d3js网络拓扑关系特效
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="http://www.mamicode.com/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网络拓扑关系特效
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。