【 D3.js 入门系列 --- 6 】 如何让图表动起来
来源:互联网 发布:淘宝质量认证防爆图片 编辑:程序博客网 时间:2024/05/18 03:49
本人的个人博客为: 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 在最终状态处弹跳几次
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
7 6
- 【 D3.js 入门系列 --- 6 】 如何让图表动起来
- 【 D3.js 入门系列 — 6 】 让图表动起来
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
- Learning D3.js(2) 让你的柱形图/直方图动起来
- 【 D3.js 入门系列 --- 4 】 如何使用scale(比例)
- 【 D3.js 入门系列 --- 5 】 如何添加坐标轴
- 怎么让ppt中的数据图表动起来
- 【 D3.js 入门系列 --- 5.1 】 做一个带坐标轴和标签的图表
- 前端.如何让进度条样式动起来
- 如何让SVG的path动起来
- three.js入门4——2014.5.27让场景动起来
- 让下划线动起来
- 让位图动起来!
- 让精灵动起来
- 让大脑动起来
- 让动画动起来
- 让cube动起来
- 让图片动起来
- WebForm获取checkbox选中的值
- linux字符设备驱动入门模版讲解
- 北京三年内拟建一万个充电桩 电动车或不限行
- quartz的cron表达式
- C#设计模式——单例模式
- 【 D3.js 入门系列 --- 6 】 如何让图表动起来
- 100句经典构建你良好的人际关系
- Android studio 中文乱码问题解决
- 苹果将终止照片处理软件iPhoto及Aperture开发
- D3D学习笔记(四)
- WES7去掉IE
- cell2struct
- Zookeeper报错Will not attempt to authenticate using SASL解决办法
- Iometer安装