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

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


401

图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方向的宽度
402

图2

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

403

图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所示。

404

 图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个。


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


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

谢谢阅读。

文档信息

posted on 2015-04-04 10:37  三少爷的剑123  阅读(1641)  评论(0编辑  收藏  举报

导航