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

littlelightss 发布于2019-08-21 12:12 / 1885人阅读

摘要：最终效果如上图所示说是中级教程代码其实也太简单源码链接在此部分解释一下首先声明这是作者推荐的写法还是规范点好这样写不久你就会发现事半功倍其次是函数画圆环全靠它自定义函数用于给定和圆环的最大值计算结束角度自定义函数用于给定和圆环的最大值计算指

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

部分解释一下:
首先声明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

GPU云服务器云服务器 java中级教程看动画学算法之:hashtable 浮动效果动画翻转动画效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87493.html

d3js中级教程之漂浮的卡牌效果(data的key函数进阶)

摘要：效果如图所示链接地址源码链接地址其实这个例子也很简单用到的也只是的基础部分我们要把一定间隔请求过来的数据进行排序并生成元素同时重用原来和新数据相对应的元素删除不对应的说的有点绕表达能力不行其实说到这明白人都能看出来了这要用到选择器的以及方法 showImg(http://segmentfault.com/img/bVbZY5); 效果如图所示,demo链接地址源码链接地址其实这个例...

zhoutao 2019-08-28 17:53 评论0 收藏0
d3js中级教程之漂浮的卡牌效果(data的key函数进阶)

摘要：效果如图所示链接地址源码链接地址其实这个例子也很简单用到的也只是的基础部分我们要把一定间隔请求过来的数据进行排序并生成元素同时重用原来和新数据相对应的元素删除不对应的说的有点绕表达能力不行其实说到这明白人都能看出来了这要用到选择器的以及方法 showImg(http://segmentfault.com/img/bVbZY5); 效果如图所示,demo链接地址源码链接地址其实这个例...

Lin_R 2019-08-21 12:13 评论0 收藏0
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

hersion 2019-08-01 17:45 评论0 收藏0
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

MRZYD 2019-08-21 17:00 评论0 收藏0
iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教程分享

摘要：微信小程序课程，面向所有具备前端基础知识的同学官网访问官网更快阅读全部免费分享课程出品全网最新微信小程序基于最新版开发者工具之初中级培训教程分享。 ?? 微信小程序课程，面向所有具备前端基础知识的同学 ?? iKcamp官网：http://www.ikcamp.com 访问官网更快阅读全部免费分享课程：《iKcamp出品｜全网最新｜微信小程序｜基于最新版1.0开发者工具之初中级培训教...

李昌杰 2019-08-30 15:53 评论0 收藏0