【 D3.js 入門系列 --- 9.4 】 叢集圖的製作

標籤：get   關係   輕量級   size   use   資料交換   javascrip   文法規則   中國   

    本人的個人部落格為： www.ourd3js.com 

    csdn部落格為： blog.csdn.net/lzhlzz 

    轉載請註明出處，謝謝。

    叢集圖（ Cluster ）通經常使用於表示包括與被包括關係。

    如今我們給出資料。並將其可視化。資料的內容為：中國裡包括的部分省份，省份裡包括的部分城市。

我們講資料檔案寫在一個 JSON 檔案裡，再用 D3 來讀取。

JSON(JavaScript Object Notation) 是一種輕量級的資料交換格式。關於它的文法規則。請各位自行查詢百度百科等。資料例如以下：

{"name":"中國","children":[{   "name":"浙江" ,     "children":    [    {"name":"杭州" },    {"name":"寧波" },    {"name":"溫州" },    {"name":"紹興" }    ]   },  { "name":"廣西" , "children":[{"name":"桂林"},{"name":"南寧"},{"name":"柳州"},{"name":"防城港"}] },{ "name":"黑龍江","children":[{"name":"哈爾濱"},{"name":"齊齊哈爾"},{"name":"牡丹江"},{"name":"大慶"}] },{ "name":"新疆" , "children":[{"name":"烏魯木齊"},{"name":"克拉瑪依"},{"name":"吐魯番"},{"name":"哈密"}]}]}

    事實上我們光從資料上看。也非常easy看出它們是用來表示什麼的。是什麼關係。好，如今開始進行可視化。

相同的，先要用 Layout 轉換資料。

var cluster = d3.layout.cluster()    .size([height, width - 200]);

    上面代碼定義了一個 cluster 的資料轉換函式。.size 函數用於設定轉換後的尺寸。接下來要用這個函數來轉換資料：

d3.json("city.json", function(error, root) {  var nodes = cluster.nodes(root);  var links = cluster.links(nodes);    console.log(nodes);  console.log(links);}

    d3.json 用於讀取 JSON 檔案。

要注意。d3.json 僅僅能用於網路讀取。所以您必須搭建一個server來使用它。比方用Apache等搭建一個簡易server來做實驗。假設你將網頁源檔案和JSON檔案放於本地同一目錄下。將會出現以下錯誤提示：
    XMLHttpRequest cannot load file:///C:/Users/lzhlzz/Dropbox/lzh/d3js/9.4/city.json. Cross origin requests are only supported for HTTP. 

    json 函數後面跟一個無名函數 function ，裡面的參數 root 用於讀取資料的內容。後面兩行代碼調用 cluster 分別轉換資料。並儲存到 nodes 和 links 中。

再後面兩行用於輸出轉換後的資料檔案。例如以所看到的：

nodes：

links：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHpobHp6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" >

    nodes 中有各個節點的子節點、深度、名稱、位置（x，y）資訊。links 中有連線兩端（ source , target ）的節點資訊。

    有了轉換後的資料，就能夠繪製了。

事實上 D3 已經基本上為我們準備好了繪製的函數。我們要學習的不過查詢並使用它們。

    繪製線條。我們能夠使用：

var diagonal = d3.svg.diagonal()    .projection(function(d) { return [d.y, d.x]; });

    這是用於繪製對掉線的函數， .projection 用於設定它的投影。繪製的時候，我們這樣使用它：

var link = svg.selectAll(".link")      .data(links)      .enter()      .append("path")      .attr("class", "link")      .attr("d", diagonal);

    這樣就繪製了全部節點之間的連線。接下來我們再繪製節點。

節點還是使用 svg 中的 circle 來繪製。這裡就不複述了。前面已經講過了。您也能夠自己查看源碼。結果圖為：

    假設您想查看源碼，請點擊以下的網址。右鍵瀏覽器選擇查看：

    http://www.ourd3js.com/demo/cluster.html

【 D3.js 入門系列 --- 9.4 】 叢集圖的製作