使用D3繪製圖表（7）--餅狀圖

時間 2019-11-11

標籤使用 d3 繪製圖表餅狀圖简体版

原文原文鏈接

　　此次是繪製餅狀圖，也是這一次使用D3繪製圖表的最後一篇，你們能夠從其餘地方深刻學習D3繪製圖表，也能夠直接查看D3的API進行學習，本次繪製餅狀圖的數據跟以前的卸載數組裏面的不同，這一次是使用d3的csv(url)函數讀取的一個data.csv文件，在此聲明，若是網頁的編輯器不是使用自帶的服務器打開網頁的那就會讀取不了csv文件報錯，我這裏使用的HBuilder，一款還不錯的編輯器。javascript

　　1.data.csv文件，以鍵值對的形式書寫html

education,population
大專及以上,11964
高中和中專,18799
初中,51966
小學,35876
文盲人口,5466

　　2.html代碼，仍是一如既往的簡單java

<!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.頁面運行效果服務器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。