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;
});
查看在线演示
