布局 矩阵树图

矩阵树图,也是层级布局的扩展,根据数据将区域划分为矩形的集合。矩形的大小和颜色,都是数据的反映。

许多门户网站都能见到类似下图,将照片以不同大小的矩形排列的情形,这正是矩阵树图的应用。

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

数据

给一个数据,形如:

{
  "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是节点大小。省略部分的数据还包含有广西和江苏两省的城市。

布局(数据转换)

创建一个矩阵树图布局,尺寸设置为[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);
  }

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

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

绘制

本例不绘制连线,只使用节点数组。节点的绘制很简单,按节点数目添加足够的分组元素<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; 
        });

结果

源代码

下载地址:treemap.zip

在线演示

委托名片直接发送邮件(需邮箱客户端)点击复制邮箱地址14721230383项目委托、技术支持,欢迎与我们联系。休息日7:00 ~ 11:0012:00 ~ 22:00工作日11:00 ~ 11:4016:00 ~ 22:00

Copyright 2014-2016, DecemberCafe, All Rights Reserved