本人的個人博客為： 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":"哈密"}
		]
	}
]
}

相同的，先要用 Layout 轉換數據。

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

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：

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

有了轉換後的數據，就能夠繪制了。

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

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

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

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 】 集群圖的制作