d3js网络拓扑关系特效可视化展现

d3js拓扑关系特效可视化展现

 

在上一篇d3js文档http://www.cnblogs.com/juandx/p/3959900.html中讲了简单的d3js方法和效果,现在我做一个完整的演示,使用d3js来展现动态可视化的网络拓扑效果图,希望对大家有所帮助。

 

<%= render partial: 'bar' %>



  
  
  D3 Page Template
  


  <% 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 %>
 
  
    
    
    
    switch
    virtual switch
    virtual machine
  
  
  

  

 

最后移动鼠标就会高亮选择的地方

d3js网络拓扑关系特效可视化展现_第1张图片

转载于:https://www.cnblogs.com/juandx/p/3959897.html

你可能感兴趣的:(javascript,ViewUI)