1. 程式人生 > >d3.js學習筆記(三) 餅圖示例

d3.js學習筆記(三) 餅圖示例

   d3.testPies = function () {
        originalData = [30, 10, 43, 55, 13];
        width = 1200;
        height = 200;
        radius = 240;
        if (svg == undefined) {
            svg = d3.select("body").append("svg").attr("width", radius).attr("height", radius);
        }

        //=============需要設定餅圖佈局=================
        pie = d3.layout.pie();
        //====================將資料轉換為餅圖資料=======================================
        piedata = pie(originalData);


        var outerRadius = 90;	//外半徑
        var innerRadius = 0;	//內半徑,為0則中間沒有空白

        //=============建立能用於圖形繪製的弧生成器===================
        var arc = d3.svg.arc()	//弧生成器
            .innerRadius(innerRadius)	//設定內半徑
            .outerRadius(outerRadius);	//設定外半徑

        //=============為每一段弧建立分組======================================================
        var color = d3.scale.category10();
        //================最好加上分組的ID號(以code開頭的分組物件),避免在svg畫板上繪製多個分組時出現錯誤===========================
        var arcs = svg.selectAll("g[id^='code']")
            .data(piedata)
            .enter()
            .append("g")
            .attr("transform", "translate(" + (width / 2) + "," + (height / 2) + ")")
            .attr("id", function (d, i) {
                return "code" + parseInt(i);
            });

        //=================建立路徑繫結弧線發生器繪製圖形===============================
        arcs.append("path")
            .attr("fill", function (d, i) {
                return color(i);
            })
            .attr("d", function (d) {
                return arc(d);
            });

        arcs.append("text")
            .attr("transform", function (d) {
                return "translate(" + arc.centroid(d) + ")";
            })
            .attr("text-anchor", "middle")
            .text(function (d) {
                return d.data;
            });


    }