D3.js学习笔记(6)--写个饼图

SVG基础

g标签

作用：将相关元素组合在一起的容器

<g transform="translate(175,175)">
    <path fill="#d62728" d="M9.184850993605149e-15,-150A150,150 0 0,1 112.99004758056049,98.6572305902749L0,0Z"></path>
    <text transform="translate(68.28120585906238,-31.0270354115946)" text-anchor="middle">55</text>
</g>

path标签

path标签可以说是svg中的精华所在，路径元素就是通过定义一个段“路径”，来绘制出各种图形
路径是很难计算的所以要用D3提供的生成器
M 移动到(moveTo) x,y 路径起始点坐标
Z 闭合路径(closepath) 将路径的开始和结束点用直线连接
L 直线(lineTo) x,y 当前节点到指定(x,y)节点，直线连接
H 水平直线 x 保持当前点的y坐标不变，x轴移动到x, 形成水平线
V 垂直直线 y 保持当前点的x坐标不变，y轴移动到y, 形成垂直线
C 三次贝塞尔曲线curveTo（x1,y1,x2,y2,x,y）
S 平滑过渡曲线 smooth curveTo(cx,cy,x,y),s会自动补出一个对称的控制点，一般和C命令一块使用
Q 二次贝塞尔曲线(大写是相对于moveTo 小写相对于0 0)

以下是饼图代码

    var svg = d3.select('#pie')
        .append('svg');
    //初始数据
    var dataset = [ 30 , 10 , 43 , 55 , 13 , 10 , 5 , 8 , 22 ]; //初始数据
    var color = d3.scale.category20(); //颜色标尺

    var pie = d3.layout.pie(),sum = 0,
        piedata = pie(dataset);
    var initData = pie(dataset);

    piedata.forEach(function(d,i){
        d._endAngle=d.endAngle;
        d.endAngle=d.startAngle;
        //d._endAngle2 = d.startAngle;
        d.duration=2000*(d.data/d3.sum(dataset));//动画时长2秒，计算每一个弧形所用动画时间
        d.delaytime=sum;
        sum+=d.duration;
    })

    var arc = d3.svg.arc() //定义弧生成器
        .outerRadius(150) //外半径
        .innerRadius(30); //内半径
    //生成弧容器
    var arcCon = svg.selectAll('g')
        .data(piedata)
        .enter()
        .append('g')
        .attr("transform","translate("+ 500 +","+ 300 +")");//整个圆的定位

    //生成弧
    arcCon.append('path')
        .attr('d',function(d){ //此处函数中的数据d 来自arcCon中挂的数据 piedata
            return arc(d);
        })
        .attr('fill',function(d,i){
            return color(i);
        })

添加对应文字