利用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]);});