這次是繪制餅狀圖，也是這一次使用D3繪制圖表的最后一篇，大家可以從其他地方深入學習D3繪制圖表，也可以直接查看D3的API進行學習，本次繪制餅狀圖的數據跟之前的卸載數組里面的不一樣，這一次是使用d3的csv(url)函數讀取的一個data.csv文件，在此聲明，如果網頁的編輯器不是使用自帶的服務器打開網頁的那就會讀取不了csv文件報錯，我這里使用的HBuilder，一款還不錯的編輯器。
1.data.csv文件，以鍵值對的形式書寫
education,population
大專及以上,11964
高中和中專,18799
初中,51966
小學,35876
文盲人口,5466
2.html代碼，還是一如既往的簡單
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="container"></div> </body> <script type="text/javascript" src="js/d3.js" ></script> <script type="text/javascript" src="js/pinzhuangtu.js" ></script> </html>
3.js代碼
d3.csv("data.csv",type,function(data){
width = 400,
height = 400;
var svg = d3.select("#container")
.append("svg")
.attr({
"width":width,
"height":height
})
var g = svg.append("g")
.attr("transform","translate(200, 200)")
var arc_generator = d3.svg.arc()
.innerRadius(100)//設置內半徑
.outerRadius(200)//設置外半徑
var angle_data = d3.layout.pie()
.value(function(d){return d.population;})
console.log(angle_data(data));
var color = d3.scale.category10();
g.selectAll("path")
.data(angle_data(data))
.enter()
.append("path")
.attr("d", arc_generator)
.style("fill",function(d,i){return color(i)})//給不同的扇形區填充不同的顏色
g.selectAll("text")//給每個扇形去添加對應文字
.data(angle_data(data))
.enter()
.append("text")
.text(function(d){return d.data.education})
.attr("transform",function(d){return "translate("+arc_generator.centroid(d)+")"})//調成每個文字的對應位置
.attr("text-anchor","middle")//是文字居中
});
function type(d) {
d.population =+ d.population;
return d;
}
4.頁面運行效果
