最终效果如上图所示
说是中级教程,代码其实也太简单,源码链接在此
部分解释一下:
首先 声明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
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。