d3.layout.partition()
分区图可以展示为方形或者圆形,从原理上来说它是树状结构的一种可视化展现形式,表示包含与被包含的关系;
分区图(Partition)的API说明
- partition.children - 取得或设置孩子访问器。
- partition.links - 计算树节点中的父子链接。
- partition.nodes - 计算分区布局并返回节点数组。
- partition.size - 指定布局的尺寸。
- partition.sort - 控制兄弟节点的遍历顺序。
- partition.value - 取得或设置用来指定圆尺寸的值访问器。
- partition - partition.nodes的别名。
1、数据
var dataset = {
"name": "中国",
"children":
[
{
"name": "浙江",
"children":
[
{"name":"嘉兴", "gdp":3147},
{"name":"金华", "gdp":2958},
{"name":"衢州", "gdp":1056}
]
},
{
"name": "广东",
"children":
[
{"name":"杭州", "gdp":8343},
{"name":"绍兴", "gdp":3620},
{"name":"湖州", "gdp":1803}
]
},
{
"name": "福建",
"children":
[
{"name":"舟山", "gdp":1021},
{"name":"台州", "gdp":3153},
{"name":"丽水", "gdp":983}
]
}
]
}
2、数据转换
var width = 500;
var height = 500;
var partition = d3.layout.partition()
.sort(null) //设定内部的顶点的排序函数,null 表示不排序
.size([width,height]) //设定转换后图形的范围
.value(function(d) { return d.gdp; }); //设定表示分区大小的值
var nodes = partition.nodes(dataset);
var links = partition.links(nodes);
转换数据后,节点数组的输出结果如图所示。
其中,节点对象的属性包括:
x: 顶点的 x 坐标位置
y: 顶点的 y 坐标位置
dx: 顶点的宽度 dx
dy: 顶点的高度 dy
本例中将不会用到liks数据对象;
3、绘制图形
生成SVG容器
var svg = d3.select('body').append('svg')
.attr('width',width)
.attr('height',height)
生成颜色比例尺
var color = d3.scale.category10();
为节点数据创建容器
var rects = svg.selectAll("g")
.data(nodes)
.enter().append("g");
为节点数据创建矩形图
rects.append("rect")
.attr("x", function(d) { return d.x; }) // 顶点的 x 坐标
.attr("y", function(d) { return d.y; }) // 顶点的 y 坐标
.attr("width", function(d) { return d.dx; }) // 顶点的宽度 dx
.attr("height", function(d) { return d.dy; }) //顶点的高度 dy
.style("stroke", "#fff")
.style("fill", function(d) { return color(d.name); })
生成文本
rects.append("text")
.attr("transform",function(d,i){
return "translate(" + (d.x+5) + "," + (d.y+5) + ") rotate(90) ";
})
.text(function(d,i) {
return d.name;
});