【 D3.js 高级系列 — 4.0 】矩阵树图

矩阵树图（Treemap），也是层级布局的扩展，根据数据将区域划分为矩形的集合。矩形的大小和颜色，都是数据的反映。许多门户网站都能见到类似图1，将照片以不同大小的矩形排列的情形，这正是矩阵树图的应用。

图1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/

现以浙江、广西、江苏三省份2013年的GDP作为数据，以GDP大小作为节点的权重将其制作成矩阵树图。

1. 数据

新建一个citygdp.json文件，内容如下：

{
	"name": "中国",
	"children":
	[
		{
			"name": "浙江",
			"children": 
			[
				{"name":"杭州", "gdp":8343},
				{"name":"宁波", "gdp":7128},
				{"name":"温州", "gdp":4003},
				{"name":"绍兴", "gdp":3620},
				{"name":"湖州", "gdp":1803},
				{"name":"嘉兴", "gdp":3147},
				{"name":"金华", "gdp":2958},
				{"name":"衢州", "gdp":1056},
				{"name":"舟山", "gdp":1021},
				{"name":"台州", "gdp":3153},
				{"name":"丽水", "gdp":983}
			]
		},
 ***************
    省略部分数据
 ***************
	]
}

每一个叶子节点都包含有name和gdp，name是节点名称，gdp是节点大小。省略部分的数据还包含有广西和江苏两省的城市。

2. 布局（数据转换）

创建一个矩阵树图布局，尺寸设置为[width, height]，即SVG画布的尺寸，value访问器设定为gdp，代码如下：

var treemap = d3.layout.treemap()
		.size([width, height])
		.value(function(d){ return d.gdp; });

这样设定value访问器后，每个节点都将拥有变量value，且其值为gdp的值。如果节点都子节点，则其gdp值为子节点value的和。例如，节点“浙江”的gdp是省内各城市的gdp的和。然后用d3.json请求文件，再转换数据。

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

转换数据后，节点数组的输出结果如图2所示。其中，节点对象的属性包括：

parent：父节点
children：子节点
depth：节点的深度
value：节点的value值，由value访问器决定
x：节点的x坐标
y：节点的y坐标
dx：x方向的宽度
dy：y方向的宽度

图2

连线数组的输出如图3，各连线对象都包含有source和target，分别是连线的两端。

图3

3. 绘制

本例不绘制连线，只使用节点数组。节点的绘制很简单，按节点数目添加足够的分组元素<g>，<g>里再添加<rect>和<text>。

var groups = svg.selectAll("g")
			.data(nodes.filter(function(d){ return !d.children; }))
			.enter()
			.append("g");
					
var rects = groups.append("rect")
				.attr("class","nodeRect")
				.attr("x",function(d){ return d.x; })
				.attr("y",function(d){ return d.y; })
				.attr("width",function(d){ return d.dx; })
				.attr("height",function(d){ return d.dy; })
				.style("fill",function(d,i){ 
return color(d.parent.name); });

	var texts = groups.append("text")
				.attr("class","nodeName")
				.attr("x",function(d){ return d.x; })
				.attr("y",function(d){ return d.y; })
				.attr("dx","0.5em")
				.attr("dy","1.5em")
				.text(function(d){ 
					return d.name + " " + d.gdp; 
				});

结果如图4所示。

图4

完整代码请单击以下链接，再右键查看源代码：

http://www.ourd3js.com/demo/G-4.0/treemap.html

4. 结束语

至此，D3 中所有的布局都讲解完毕。其中【入门系列】讲解了6个布局，【进阶系列】2个，【高级系列】3个，共11个布局。

D3总共提供了12个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。

12个布局中，层级图（Hierarchy）不能直接使用，集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的，这样，能够使用的布局是11个。

由于“布局”这个词可能会让初学者联想成是为了“绘制”，其实布局仅仅是为了计算哪个元素显示到哪里。从直观上看，布局的作用是将某种数据转换成另一种数据，而转换后的数据是利于可视化的。因此，本站的教程都将布局称为“数据转换”。

当然，你也可以按原字“布局”来理解，也可理解为“计算”，只要知道意思即可。

谢谢阅读。

文档信息