【 D3.js 入門系列 --- 9.6 】 打包圖的製作

標籤：d3   layout   pack   資料   打包圖   

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

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

    轉載請註明出處，謝謝。

    打包圖（ Pack ），用於包含與被包含的關係，也表示各個對象的權重，通常用一圓套一圓來表示前者，用圓的大小來表示後者。

    先看本節所使用的資料：  city2.json

    這是各城市所屬關係的資料。我們現在要用 D3 的 layout 來轉換資料，使其容易進行可視化處理。

var pack = d3.layout.pack()    .size([ width, height ])    .radius(20);

    上面定義了 pack 函數，size() 是轉換後資料的尺寸，即轉換後頂點的(x,y)，都會在這個 size 範圍內。radius 是用於設定轉換後最小的圓的半徑。接下來要讀取 json 檔案，並將檔案內容提供給 pack 函數，用於轉換資料。

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

    上面用 pack 分別將資料轉換成了頂點 nodes 和 連線 links，後面兩句話的 console.log 用於輸出轉換後的資料。我們來看看資料被轉換成了什麼樣。

    上面的圖片是頂點 nodes 的內容，我們可以看到，資料被轉換後，多了深度資訊(depth)，半徑大小(r)，座標位置(x,y)等。我沒有貼 links 的圖片，因為我們此節並不對連線進行繪製。    無論用什麼 layout 來轉換資料，我們一定要先看看轉換後的資料是什麼，再進行繪製，否則很容易出錯。    我們要繪製的內容有圓和文字，都在 SVG 中繪製。代碼如下：

svg.selectAll("circle").data(nodes).enter().append("circle").attr("fill","rgb(31, 119, 180)").attr("fill-opacity","0.4").attr("cx",function(d){return d.x;}).attr("cy",function(d){return d.y;}).attr("r",function(d){return d.r;}).on("mouseover",function(d,i){d3.select(this).attr("fill","yellow");}).on("mouseout",function(d,i){d3.select(this).attr("fill","rgb(31, 119, 180)");});

    這是繪製圓的代碼，看過前面幾節的朋友一定已經很熟悉了吧。
    結果圖如下：
    滑鼠操作的內容，請點擊下面的連結自己嘗試：    http://www.ourd3js.com/demo/pack.html    完整代碼，請右鍵點擊瀏覽器查看。