程式目錄結構：

先展示終極效果：

①要引用d3js類庫

準備資料來源  格式如下

var  chartData=[
    {label: "漯河", value: 2},
    {label: "舞陽", value: 3},
    {label: "郭莊", value: 2},
    {label: "北京", value: 3},
    {label: "漯河3", value: 2},
    {label: "北京3", value: 3},
    {label: "漯河4", value: 2},
    {label: "北京4", value: 3},
    {label
 
: "郭莊2", value: 4}
];

var  title= [{
            text: "www.guowenke.tk",
            color: "#333333",
            fontSize: 18,
            font: "arial"
}];

追加一個畫布

var svg = d3.select("#pie")
        .append("svg")
        .attr("width", canvasWidth)
        .attr("height", canvasHeight);

//追加標題
svg
 
.selectAll(".title")
        .data(title)
        .enter()
        .append("text")
        .text(function(d){
            return d.text;
        })
        .attr("class","title")
        .attr("fill",function(d){return d.color})
        .style("font-family", function (d) {
            return d.font;
        })
        .attr
 
("x", canvasWidth/ 2)
        .attr("y",30);

下面進入正題開始繪圖

 ////繪圖
//確定餅圖中心
var pieChartElement =svg.append("g")
         .attr("transform", "translate(" + (canvasWidth/ 2) + "," + (canvasHeight / 2) + ")");

//建立弧生成器
var arc = d3.svg.arc()
        .innerRadius(canvasHeight * 0)
        .outerRadius(canvasHeight * 0.8/3)
        .startAngle(0)
        .endAngle(function (d) {
            return (d.value /getSumData(chartData)) * 2 * Math.PI;
        }) ;

var arcs = pieChartElement.selectAll("g")
        .data(chartData)
        .enter()
        .append("g")
        .attr("transform",
                function (d, i) {
                    var angle = 0;
                    if (i > 0) {
                        angle =  getSegmentAngle(i - 1, chartData, getSumData(chartData));
                    }
                    return "rotate(" + angle + ")";
                }
        );
      arcs.append("path")
        .attr("fill", function (d, i) {
            return colors[i];  //設定弧的顏色
})
        .attr("d", function (d) {
            return arc(d); //使用弧生成器
});

餅圖已經繪製完工，當然您可以在此基礎上進一步增加功能