D3中级教程之带有动画效果的简易罗盘

最终效果如上图所示
说是中级教程,代码其实也太简单,源码连接在此

部分解释一下:
首先 声明margin,width,height,...这是D3做者推荐的写法,仍是规范点好,这样写,不久你就会发现事半功倍,

其次 是d3.svg.arc()函数,画圆环全靠它,
自定义getEndAngle(data, max) 函数,用于给定data和圆环的最大值,计算结束角度
自定义getNeedlePosition (data, max)函数,用于给定data和圆环的最大值计算指针路径(d属性值)

最后 画出相应的背景圆环,前景圆环和指针,此处主要用到transition().attrTween()函数产生流畅的动画效果.
attrTween使用很简单,返回一个以t为参数的函数,t由0变为1,从而产生动画效果.

思考:其实指针能够用transform:rotate去作,并实现相应动画,但记住要rotate只有一个参数时,将围绕(0,0)旋转.
好了,就这些吧.但愿个人文章能帮助到你,更多资料请翻阅d3js.org,
我是朱现明,任职于精硕科技可视化部门前端开发,更多精彩的文章即将奉上.

---

zhuxianming@admaster.com.cn