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

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

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

图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方向的宽度
【 D3.js 高级系列 — 4.0 】 矩阵树图

图2

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

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

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

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

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

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

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

谢谢阅读。

文档信息

上一篇:【 D3.js 高级系列 — 1.0 】 文本的换行


下一篇:【 D3.js 高级系列 — 6.0 】 值域和颜色