轉載請註明出處，謝謝。

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

    這是各城市所屬關係的資料。我們現在要用 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)");
			});
 

    這是繪製圓的程式碼，看過前面幾節的朋友一定已經很熟悉了吧。
    結果圖如下：
    滑鼠操作的內容，請點選下面的連結自己嘗試：     完整程式碼，請右鍵點選瀏覽器檢視。