d3.layout.partition()
上节中展示的是基本的方形分区图,这节我们要做一个圆形的分区图,圆形图跟方形图基本相同,只有布局函数的 size 函数和绘制图形的部分稍有区别;
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 radius = Math.min(width, height) / 2
var partition = d3.layout.partition()
.sort(null) //设定内部的顶点的排序函数,null 表示不排序
.size([2 * Math.PI, radius * radius]) //第一个值为 2 * PI ,第二个值为圆半径的平方,暂时不去深究为什么这么做,只需记得这么用即可
.value(function(d) { return d.gdp; }); //设定表示分区大小的值
var nodes = partition.nodes(dataset);
var links = partition.links(nodes);
转换数据后,节点数组的输出结果如图所示。
其中,节点对象的属性包括:
x: 绕圆心方向的起始位置
y: 由圆心向外方向的结束位置
dx: 起始位置宽度
dy: 结束位置宽度
本例中将不会用到liks数据对象;
3、绘制图形
生成SVG容器
var svg = d3.select('body').append('svg')
.attr('class','axis')
.attr('width',width)
.attr('height',height)
.append('g')
.attr("transform", "translate(" + radius + "," + radius + ")");
生成颜色比例尺
var color = d3.scale.category20();
创建圆弧SVG生成器
var arc = d3.svg.arc()
.startAngle(function(d) { return d.x; })
.endAngle(function(d) { return d.x + d.dx; })
.innerRadius(function(d) { return Math.sqrt(d.y); })
.outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
为节点数据创建容器
var arcs = svg.selectAll("g")
.data(nodes)
.enter().append("g");
为节点数据创建圆弧路径
arcs.append("path")
.attr("d", arc)
.style("stroke", "#fff")
.style("fill", function(d) { return color(d.name); })
生成文本
arcs.append("text")
.attr("text-anchor","middle")
.attr("transform",function(d,i){
//第一个元素不动
if( i == 0 ) return ;
//其它的平移
return "translate(" + arc.centroid(d) + ")"
})
.text(function(d) { return d.name; });