【 D3.js 入门系列 --- 9.6 】打包图的制作

浏览数：30 / 时间：2015年06月09日

本人的个人博客为：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)");
			});

这是绘制圆的代码，看过前面几节的朋友一定已经很熟悉了吧。
结果图如下：