svg的path创建动态饼图原理

一共分为三个步骤：

• 画扇形
• 用扇形画圆
• 做动画

下面分三个步骤详细讲解

画扇形

画扇形再前面的文章中以及提及到了，还有用到的画弧命令也在前面的文章里，不清楚的可以去看我前面的文章：svg的path应用，这里再简单提及一下

• 首先需要从圆心画一条直线到一个坐标，直线长半径

  • 这一步我们需要用到一个求坐标的函数，首先要解决的是如何求坐标。求坐标我们根据角度来求，已知半径圆心坐标，给出角度，求出坐标

                    function d2a(ang) {//角度转弧度
                        return ang * Math.PI / 180;
                    }
                    
                    function point(ang) {//根据角度求坐标
                        return {
                            x: cx + r * Math.sin(d2a(ang)),
                            y: cy - r * Math.cos(d2a(ang))
                        }
                    }

• 然后再从到达的那个坐标我们称作起始点画一条弧到另一个坐标我们称作终止点
• 最后闭合路径就得到一个扇形

用扇形画圆

画出扇形之后我们根据有多少个数据就画多少个弧，最终画出一个圆。
我们把数据求和得到一个总数据，再把每一个数据*360/总数据=这个数据占的角度，这个角度就可以传给上面的point函数求出坐标最后画出扇形，然后循环每一个数据画出对应角度的扇形在，最终画出一个圆

做动画

做动画的原理就是假设我们改变扇形半径r的长度，鼠标移入r变长，移出r变短。只是再变化的过程中我们不是一步到位，而是分很多步完成，例如从150变到200，中间距离50，我们一次走1，不停的走不停的走，走到之后停止，就会有动画的效果了

完整代码