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;
            });


    }