矩阵树图(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个。

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

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

谢谢阅读。

文档信息

【 D3.js 高级系列 — 4.0 】 矩阵树图的更多相关文章

  1. 【 D3.js 高级系列 — 1.0 】 文本的换行

    在 SVG 中添加文本是使用 text 元素.但是,这个元素不能够自动换行,超出的部分就显示不出来了,怎么办呢? 高级系列开篇前言 从今天开始写高级系列教程.还是那句话,由于本人实力有限,不一定保证入 ...

  2. 【 D3.js 高级系列 — 2.0 】 捆图

    捆图(Bundle)是 D3 中比较奇特的一个布局,只有两个函数,而且需要与其它布局配合使用.本文讲述捆图的制作方法. 有关捆图的例子极少,很容易找到的是:http://bl.ocks.org/mbo ...

  3. 【 D3.js 高级系列 — 6.0 】 值域和颜色

    在[入门 - 第 10 章]作了一张中国地图,其中各省份的颜色值都是随意赋值的.如果要将一些值反映在地图上,可以利用颜色的变化来表示值的变化. 1. 思路 例如,有值域的范围为: [10, 500] ...

  4. 【 D3.js 高级系列 — 2.0 】 机械图 + 人物关系图

    机械图(力路线图)结合老百姓的关系图中的生活,这是更有趣. 本文将以此为证据,所列的如何图插入外部的图像和文字的力学. 在[第 9.2 章]中制作了一个最简单的力学图.其后有非常多朋友有疑问,基本的问 ...

  5. 【 D3.js 高级系列 — 10.0 】 思维导图

    思维导图的节点具有层级关系和隶属关系,很像枝叶从树干伸展开来的形状.在前面讲解布局的时候,提到有五个布局是由层级布局扩展来的,其中的树状图(tree layout)和集群图(cluster layou ...

  6. 【 D3.js 高级系列 — 9.0 】 交互式提示框

    一般来说,图表中不宜存在过多文字.但是,有时需要一些文字来描述某些图形元素.那么,可以实现一种交互:当用户鼠标滑到某图形元素时,出现一个提示框,里面写有描述文字.这是一种简单.普遍的交互式,几乎适用于 ...

  7. 【 D3.js 高级系列 — 8.0 】 标线

    有时候,需要在地图上绘制连线,表示"从某处到某处"的意思,这种时候在地图上绘制的连线,称为"标线". 1. 标线是什么 标线,是指地图上需要两个坐标以上才能表示 ...

  8. 【 D3.js 高级系列 — 7.0 】 标注地点

    有时需要告诉用户地图上的一些目标,如果该目标是只需要一个坐标就能表示的,称其为"标注". 1. 标注是什么 标注,是指地图上只需要一个坐标即可表示的元素.例如,在经纬度(116, ...

  9. 【 D3.js 高级系列 — 5.0 】 颜色

    颜色是作图不可少的概念,常用的标准有 RGB 和 HSL,D3 提供了创建颜色对象的方法,能够相互转换和插值. RGB色彩模式是通过对红(Red).绿(Green).蓝(Blue)三个颜色通道相互叠加 ...

随机推荐

  1. php使用注意点

    php使用时间之前要将php.ini中时区设置好,否则会报警告.截图如下:“;date.timezone =”设置为“date.timezone =Asia/Shanghai”即可. apache如果 ...

  2. 文件/图片,批量上传【神器】--WebUploader

    <system.web> <httpRuntime maxRequestLength="102400" executionTimeout="720&qu ...

  3. linux 命令 备忘

    openssl rand -base64 32 随机数 date | md5sum data 日期 cal 日历 man -f man sync 数据同步写入磁盘 shutdown reboot ha ...

  4. 解决eclipse复制粘贴js代码卡死的问题

    鸣谢:http://blog.csdn.net/zhangzikui/article/details/24805935 ---------------------------------------- ...

  5. IDFA问题,苹果上传问题。improper Advertising identifier [IDFA] Usage.

    原地址: 报告 improper Advertising identifier [IDFA] Usage. Your app contains the Advertising Identifier [ ...

  6. fork与vfork的区别

    fork()与vfock()都是创建一个进程,那他们有什么区别呢?总结有以下三点区别: 1.  fork  ():子进程拷贝父进程的数据段,代码段     vfork ( ):子进程与父进程共享数据段 ...

  7. C++11多线程教学(二)

    C++11多线程教学II 从我最近发布的C++11线程教学文章里,我们已经知道C++11线程写法与POSIX的pthreads写法相比,更为简洁.只需很少几个简单概念,我们就能搭建相当复杂的处理图片程 ...

  8. ajax的GET和POST请求

    GET和POST请求 GET请求时最常见的请求类型,用于向服务器查询信息,必要时可以将查询字符串参数放在URL尾部发送给服务器,如果参数有特殊字符必须正确编码.我们上面使用的例子都是使用GET请求,非 ...

  9. eCos中的线程与同步

    http://blog.csdn.net/ooaven/article/details/6280018 先看一下eCos线程的创建.控制以及优先级的操作这三个方面的知识,主要是对它的实现方式及API做 ...

  10. java List 去重(两种方式)

    方法一: 通过Iterator 的remove方法 Java代码  public void testList() { List<Integer> list=new ArrayList< ...