D3指arc生成器__圓形上分佈柱狀圖

var width=800,height=600;

// var data = [
//                 {startAngle:0,endAngle:2*Math.PI/3},
//                 {startAngle:2*Math.PI/3,endAngle:4*Math.PI/3},
//                 {startAngle:4*Math.PI/3,endAngle:2*Math.PI}  
//             ];


var data=[];
var total=200;//總數量
var start=0,segment=Math.PI*2/total;
console.log(segment)
for (var i=0;i<total;i++){
    var num=Math.random()*100;
    // console.log(num)
    data.push({startAngle:start,endAngle:start+segment,value:num});
    start=start+segment;
}

console.log(data);
var outerRadius=190;
var arc = d3.svg.arc()
                  .innerRadius(188)
                  .outerRadius(outerRadius)

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

// //把path扔到容器中-- lineData和lineFunction，並給d賦屬性
var color=d3.scale.category20();

var g = svg.selectAll("g .arc")
                    .data(data)
                    .enter()
                    .append("g")
                    .attr("class","arc")
                    .attr("transform","translate("+width/2+","+height/2+")");//transform是將g元素移動位置的意思
    g.append("path")
        .attr("d",function(d){
             return arc(d);
        })
        .attr("stroke","white")
        .attr("stroke-width",2)
        .attr("fill",function(d,i){
            return color(i);
        })
// var color=d3.scale.category20();

g.append("line")
 .attr("stroke",function(d,i){
    return color(i);
 })
 .attr("x1",function(d){

    return arc.centroid(d)[0];
 })
 .attr("y1",function(d){
    return arc.centroid(d)[1];
 })
 .attr("x2",function(d){
    return arc.centroid(d)[0]*(outerRadius+d.value)/outerRadius;
 })
 .attr("y2",function(d){
    return arc.centroid(d)[1]*(outerRadius+d.value)/outerRadius;
 })
 .attr("stroke-width",function(d){
    return outerRadius*(d.endAngle-d.startAngle);
 })

     svg.append("g")
        .selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .attr("transform",function(d){
             console.log(arc.centroid(d))
            return "translate("+width/2+","+height/2+")"+
                   "translate("+arc.centroid(d)+")";

        })
        .attr("text-anchor","middle")
        .attr("fill","black")
        .attr("font-size",12)
        .text(function(d){
            // return parseInt((d.endAngle-d.startAngle)*180/Math.PI+"'");
            return parseInt(d.value);
        })