【 D3.js 入门系列 --- 6 】 如何使移动图表
2015-07-11 08:17
661 查看
我的个人博客是: www.ourd3js.com
csdn博客为:
blog.csdn.net/lzhlzz
转载请注明出处,谢谢。
[5.1]节中制作了一个比較完好的图表。但它是静态的。想做出它的动态效果吗?在D3中仅仅须要短短的几行代码就可以。
这一节将涉及4个函数的使用。
1.transition()
启动转变效果仅仅须要加入这个就可以。
把它加到两种状态之间。比如:
如上代码,上下两种属性 fill 的颜色不同,中间加入一行 .transition() ,表示要从红色变为蓝色。D3会自己主动对颜色之间的值进行线性插值,终于在动画中会看到平滑的颜色变化。
2.duration()
指定整个转变持续多少时间。单位为毫秒。如 .duration(2000) 。是持续2000毫秒。即2秒。
3.ease()
指定转变的方式,经常使用的转变方式有:
linear 普通的线性变化
circle 慢慢地到达变换的终于状态
elastic 带有弹跳的到达终于状态
bounce 在终于状态处弹跳几次
调用时,形如: .ease(“bounce”)
4.delay()
指定延迟的时间,表示一定时间后才開始转变,单位相同为毫秒。这个函数能够对总体指定延迟。也能够对个别指定延迟。
对总体指定时,如:
这样指定。将会延迟500毫秒播放一个1000毫秒的动画。故整个动画长度为1500毫秒。
这样指定的话,如果有10个元素,那么第1个元素不延迟(由于 i = 0),那么第2个元素延迟200毫秒,第3个延迟400毫秒,依次类推….整个动画的长度为 200*(10-1) + 1000 = 2800 毫秒。
要制作转变效果须要用到以上四个函数,实际使用时,通常形如:
前后接转变效果的初始状态和目标状态。
实际效果可见: http://www.ourd3js.com/demo/transition.html
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
相关文章推荐
- jsp上传下载+SmartUpload插件上传
- knockout.js实例二~购物车
- three.js javascript 3d 超级引擎 !
- json和jsonp
- JavaScript Lexical Scope
- JS返回上一步
- javascript中JSON对象与JSON字符串相互转换实例
- JavaScript使用RegExp进行正则匹配的方法
- JSON学习总结
- JSON学习总结
- javascript 函数的定义与参数的有无
- 【 D3.js 入门系列 — 2 】 绑定数据和选择元素
- JSONP VS CORS
- JSP深入
- JS DOM编程艺术——最佳实践—— JS学习笔记2015-7-10(第81天)
- JS-商品图片点击轮换
- JS-商品图片放大器
- javascript 事件处理
- Javascript我学之二函数定义
- Js中的window.parent ,window.top,window.self详解