d3.layout.treemap()

矩阵图(Treemap)的API说明

• treemap.children - 取得或设置孩子访问器。
• treemap.links - 计算树节点中的父子链接。
• treemap.mode - 改变布局的算法。
• treemap.nodes - 计算矩形树布局并返回节点数组。
• treemap.padding - 指定父子之间的间距。
• treemap.round - 启用或者禁用四舍五入像素值。
• treemap.size - 指定布局的尺寸。
• treemap.sort - 控制兄弟节点的遍历顺序。
• treemap.sticky - 让布局对稳定的更新是粘滞的（sticky）。
• treemap.value - 取得或设置用来指定矩形树中矩形单元尺寸的值访问器。
• treemap - treemap.nodes的别名。

1、数据

var dataset = {
  "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": "广东",
          "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": "福建",
          "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、children字段为必须，数据值字段可自定或用默认的value，本例中用的是gdp，所以在接下来的数据转换中需要用value方法指定数据值字段。

2、数据转换

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

转换数据后，节点数组的输出结果如图所示。

其中，节点对象的属性包括：

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

本例中将不会用到liks数据对象；

3、绘制图形

生成SVG容器

var svg = d3.select('body').append('svg')
    .attr('width',width)
    .attr('height',height)

生成颜色比例尺

var color = d3.scale.category10();

为每种类型数据创建容器

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;
    });

查看在线演示