d3.testPies = function () {
originalData = [30, 10, 43, 55, 13];
width = 1200;
height = 200;
radius = 240;
if (svg == undefined) {
svg = d3.select("body").append("svg").attr("width", radius).attr("height", radius);
}
//=============需要设置饼图布局=================
pie = d3.layout.pie();
//====================将数据转换为饼图数据=======================================
piedata = pie(originalData);
var outerRadius = 90; //外半径
var innerRadius = 0; //内半径,为0则中间没有空白
//=============创建能用于图形绘制的弧生成器===================
var arc = d3.svg.arc() //弧生成器
.innerRadius(innerRadius) //设置内半径
.outerRadius(outerRadius); //设置外半径
//=============为每一段弧建立分组======================================================
var color = d3.scale.category10();
//================最好加上分组的ID号(以code开头的分组对象),避免在svg画板上绘制多个分组时出现错误===========================
var arcs = svg.selectAll("g[id^='code']")
.data(piedata)
.enter()
.append("g")
.attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")")
.attr("id", function (d, i) {
return "code" + parseInt(i);
});
//=================创建路径绑定弧线发生器绘制图形===============================
arcs.append("path")
.attr("fill", function (d, i) {
return color(i);
})
.attr("d", function (d) {
return arc(d);
});
arcs.append("text")
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function (d) {
return d.data;
});
}
d3.js学习笔记(三) 饼图示例
猜你喜欢
转载自blog.csdn.net/u012846041/article/details/82965511
今日推荐
周排行