弧形表圖

 var dataSet = [
//        定義多個接連弧形組成一個完整的圓
        {startAngle: 0, endAngle: .6 * Math.PI},
        {startAngle: .6 * Math.PI, endAngle: .7 * Math.PI},
        {startAngle: .7 * Math.PI, endAngle: 1.25 * Math.PI},
        {startAngle: 1.25 * Math.PI, endAngle: 1.65 * Math.PI},
        {startAngle: Math.PI * 1.65, endAngle: 2 * Math.PI}
    ];
    var arcPath = d3.svg.arc().innerRadius(0).outerRadius(150);
    var color = d3.scale.category10();
    var svg = d3.select("body").append("svg").attr("width", 400).attr("height", 400);
    svg.selectAll("path").data(dataSet).enter().append("path").attr("d", function (d) {
        return arcPath(d)
    }).attr("stroke", function (d, i) {
        return "white";
    }).attr("transform", "translate(200,200)").attr("stroke-width", 1).attr("fill", function (d, i) {
        return color(i);
    });
    svg.selectAll("text").data(dataSet).enter().append("text").attr("transform", function (d, i) {
//        arcPath.centroid(d)獲取一段弧的中心點**數組**
//        translate可以定義多個 表示一段一段距離后相對現在的位置接連移動一段距離
        return "translate(200,200)" + "translate(" + arcPath.centroid(d) + ")";
    }).attr("text-anchor", "middle").attr("fill", "white").attr("font-size", "18px").text(function (d) {
        return Math.floor((d.endAngle - d.startAngle) * 180 / Math.PI) + " °";
    })

結果:

弧形