D3.js 繪製圓餅圖(pie chart)及甜甜圈圖(donut chart)

利用arc函數繪製圓弧
            //指定繪圖容器
            var vis=d3.select("#mysvg");
            //利用d3製作myScale函數,用以讓百分比可直接對應至弧度
            //myScale(0)=0, myScale(100)=2pi
            var myScale=d3.scale.linear().domain([0,100]).range([0,2*Math.PI]);
            //資料陣列,[起始,結束,顏色]
            var datas=[[0,50,"#f00"],[50,75,"#0f0"],[75,100,"#00f"]];
            //.arc()  繪製圓弧
            //.innerRadius(內圓半徑)
            //.outerRadius(外圓半徑)
            //.startAngle(起始角度)
            //.endAngle(結束角度)
            var arc=d3.svg.arc().innerRadius(50).outerRadius(100).startAngle(function(d){return myScale(d[0]);}).endAngle(function(d){return myScale(d[1]);});
            //.selectAll().data().enter() 導入data,並對每個在datas中的資料進行相對應的繪圖            
            vis.selectAll("path").data(datas).enter().append("path").attr("d", arc).style("fill",function(d){return d[2];}).attr("transform", "translate(200,200)");

把innerRadius(50)改為0,就會變成圓餅圖了
   var arc=d3.svg.arc().innerRadius(0).outerRadius(100).startAngle(function(d){return myScale(d[0]);}).endAngle(function(d){return myScale(d[1]);});