D3js技術文檔
概述
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.
D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as CSS3, HTML5 and SVG. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of components and plugins.
特點
D3的全稱是（Data-Driven Documents），顧名思義可以知道是一個關於數據驅動的文檔的javascript類庫。說得簡單一點，D3.js主要是用於操作數據的，它通過使用HTML、SVG、CSS來給你的數據注入生命，即轉換為各種簡單易懂的絢麗的圖形。
D3 是最流行的可視化庫之一，它被很多其他的表格插件所使用。它允許綁定任意數據到DOM，然后將數據驅動轉換應用到Document中。你可以使用它用一個數組創建基本的HMTL表格，或是利用它的流體過度和交互，用相似的數據創建驚人的SVG條形圖。
環境和安裝d3js
環境：windows 7
安裝方法： 在https://github.com/mbostock/d 下載d3壓縮包，將其解壓放入工程目錄其內包含了d3的js庫。比如本文使用ror環境開發，則將解壓好的d3.js 文件放入C:\Users\Administrator\Desktop\portal-ec2\app\assets\javascripts目錄下。
工作內容
把工程內對應的交換機和虛擬機的拓撲結構用d3js表現出來。交換機和虛擬機的拓撲關系儲存在工程內數據庫(mysql)中，通過使用ruby語言將數據庫中數據關系導出來后，使用d3js將其數據可視化。
數據庫中有3張表來表示這個拓撲關系：
1、 switch_type：表示交換機是物理交換機還是虛擬交換機
2、 switch_to_switch:表示交換機之間的連接關系
3、 vm_to_switch:表示虛擬機和交換機之間的連接關系
工作流程
1. 將數據從數據庫中導出
在對應的controller中取出數據庫數據，放入相應的實例變量
#存儲拓撲
def topo
@vts = VmToSwitch.all
@sts = SwitchToSwitch.all
@stvs = SwitchToVswitch.all
end
在對應的views文件中儲存所得到的實例變量中的數據
<% 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 %>
這樣，所有的關系都已經儲存在v_and_s數組中了。
2. 把數據生成拓撲關系
生成拓撲關系中的點，放入nodes數組中
for(i = 0;i < idnum - vts_size; ++i) //把switch放入nodes
{
var node1 = {
"name": ids[i],
"type": "circle",
"switch_type": hashTable2[ids[i]]
};
nodes.push(node1);
}
for(i = idnum - vts_size;i < idnum; ++i) //把vm放入nodes
{
var node1 = {
"name": ids[i],
"type": "rect",
"switch_type": "rect" };
nodes.push(node1);
}
生成拓撲關系中的邊，放入edges數組中
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);
}
這樣就能生成如下所示的數據對象數組，這樣是為了對應d3js中相應的函數
{ nodes: [
{ name: "s1" , type:”cicle”,switch_type:”1”},
{ name: "s2" ,type:”cicle”,switch_type:”1”},
{ name: "s3" ,type:”rect”,switch_type:”2”}
]，
edges: [
{ source: 0, target: 1 ,des:"s1"},
{ source: 0, target: 2 ,des:"s2"},
{ source: 1, target: 2 ,des:"s3"}
]
}
3. 利用數據生成對應的圖形
以下工作都是在js腳本中進行，把此js腳本嵌入html頁面即可實現可視化功能
在body元素最后添加svg圖形
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
利用d3js函數庫生成力導向模型(拓撲關系圖)
var force = d3.layout.force()
.nodes(nodes)
.links(edges)
.size([w, h])
.linkDistance([150])
.charge([-3000]);
force.start(); //啟動模型
生成圖形中的邊
var edges = svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke", stroke_color)
.style("stroke-width", stroke_width)
.call(force.drag);
生成圖形中的點
var node = svg.selectAll("node");
node = node.data(dataset.nodes);
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.call(force.drag);
nodeEnter.append("circle")
.attr("r", 10)
.style("fill", function(d, i) {
return color(i); })
4. 完成
最后，打開對應的html頁面，即可看到類似的拓撲關系圖
其他問題
在學習d3的過程中，需要了解相應的js語言的知識，其中對應匿名函數的應用非常多，可以進行相應的學習。
在畫拓撲關系中遇到一個很痛苦的事情是把矩形和圓表現在一個svg圖形中並且使他們滿足對應的關系，這樣用函數不能進行圖形的選擇，我做的方法是在一個點中同時添加一個矩形和一個圓，然后可以根據點的屬性type來使圓顯示或者使矩形顯示，這樣就做出了將圓和矩形連接在一起的效果！
最后我在http://www.cnblogs.com/juandx/p/3959897.html這篇文章做了一個完整的演示，希望對大家有所幫助
Reference（參考文檔）
官方文檔：http://d3js.org/
官方力導向模型學習文檔：https://github.com/mbostock/d3/wiki/Force-Layout