【 D3.js 入门系列 --- 6 】 如何使移动图表
我的个人博客是: www.ourd3js.com
csdn博客为: blog.csdn.net/lzhlzz
转载请注明出处,谢谢。
[5.1]节中制作了一个比較完好的图表。但它是静态的。想做出它的动态效果吗?在D3中仅仅须要短短的几行代码就可以。
这一节将涉及4个函数的使用。
1.transition()
启动转变效果仅仅须要加入这个就可以。
把它加到两种状态之间。比如:
.attr("fill","red")
.transition()
.attr("fill","steelblue")
如上代码,上下两种属性 fill 的颜色不同,中间加入一行 .transition() ,表示要从红色变为蓝色。D3会自己主动对颜色之间的值进行线性插值,终于在动画中会看到平滑的颜色变化。
2.duration()
指定整个转变持续多少时间。单位为毫秒。如 .duration(2000) 。是持续2000毫秒。即2秒。
3.ease()
指定转变的方式,经常使用的转变方式有:
- linear 普通的线性变化
- circle 慢慢地到达变换的终于状态
- elastic 带有弹跳的到达终于状态
- bounce 在终于状态处弹跳几次
调用时,形如: .ease(“bounce”)
4.delay()
指定延迟的时间,表示一定时间后才開始转变,单位相同为毫秒。这个函数能够对总体指定延迟。也能够对个别指定延迟。
对总体指定时,如:
.transition()
.duration(1000)
.delay(500)
这样指定。将会延迟500毫秒播放一个1000毫秒的动画。故整个动画长度为1500毫秒。
.transition()
.duration(1000)
.delay(funtion(d,i){
return 200*i;
})
这样指定的话,如果有10个元素,那么第1个元素不延迟(由于 i = 0),那么第2个元素延迟200毫秒,第3个延迟400毫秒,依次类推….整个动画的长度为 200*(10-1) + 1000 = 2800 毫秒。
要制作转变效果须要用到以上四个函数,实际使用时,通常形如:
.transition()
.duration(3000)
.ease("bounce")
.delay(function(d,i){
return 200*i;
})
前后接转变效果的初始状态和目标状态。
实际效果可见: http://www.ourd3js.com/demo/transition.html
版权声明:本文博客原创文章。博客,未经同意,不得转载。
最新文章
- ASP.NET MVC 控制器激活(三)
- 关于RequireJS与AngularJS的集成文档
- 滚动光效shader
- 解决父类加载iframe,src参数过大导致加载失败
- Linux内核socket优化项
- [css] 垂直居中方法
- 手机NFC通信的安全车钥匙
- cloudera目录位置
- 访问Github过慢解决
- ACM第三次比赛 Big Chocolate
- Tornado介绍及自定义组件
- SSH HTTP代理
- Google Maps V3 之 路线服务
- 【Django】关于上传图片遇到的问题
- RelativeLayout 相对父级元素布局
- Python学习---django-debug-tools安装
- ASP.NET MVC 3升级至MVC 5.1的遭遇:“已添加了具有相同键的项”
- sort sign numeric
- [转]ASP.NET MVC 5 - 给电影表和模型添加新字段
- wpa安装方法
热门文章
- 慎重Asp.net中static变量的使用方法
- DATAGUARD在做SWITCHOVER切换时遇到问题总结
- RSA Android加密的数据服务器上无法解密?
- [Grid Layout] Use auto-fill and auto-fit if the number of repeated grid tracks is not to be def
- dbvisualizer 使用笔记
- iOS8.1 编译ffmpeg和集成第三方实现直播(监控类)
- 中国象棋V2:Java源代码、毕业设计等所有文档,已经全部提交到CSDN-Code平台
- erlang判断模块导出函数问题
- 前端css实现最基本的时间轴
- Java冒泡排序与二分法查找的代码随笔