【 D3.js 入门系列 --- 9.4 】 集群图的制作

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

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 只能用于网络读取，所以您必须搭建一个服务器来使用它，可用tomcat等搭建一个简易服务器来做试验。

    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);

    如果您想查看源代码，请点击下面的网址，右键浏览器选择查看：

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

【 D3.js 入门系列 --- 9.4 】 集群图的制作,古老的榕树,5-wow.com