d3.js的学习_04_扇形图

代码:

var dataset=[20,4,5,70,30];
var piedata=d3.layout.pie(dataset);  //将dataset转化为能被用元表示的数组
var color=d3.scale.category10();

var width=300;
var height=300;

var outerRadius=width/2;//外半径
var innerRadius=0;//内半径
var arc=d3.svg.arc()
    .outerRadius(outerRadius)
    .innerRadius(innerRadius);//生成缺少角度的弧

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

var arcs=svg.selectAll("g")
        .data(piedata(dataset))
        .enter()
        .append("g")
        .attr("transform","translate("+(width/2)+","+(width/2)+")");//创建一个含有dataset长度的组"g"s

arcs.append("path")
    .attr("fill",function(d,i){
        return color(i);
    })
    .attr("d",arc);//为这个组的弧形s定义颜色与角度

arcs.append("text")
    .attr("transform",function(d){
        return "translate("+arc.centroid(d)+")";//将text定义在每一个弧形的中央
    })
    .attr("text-anchor","middle")
    .text(function(d){
        return d.value;
    });

更多参考文章:

https://blog.csdn.net/roll_jj/article/details/76019695