D3 笔记五:过渡、transition、duration、ease、delay
来源:互联网 发布:百度鹰眼定位软件 编辑:程序博客网 时间:2024/05/18 21:06
动态的图表,是指图表在某一时间段会发生某种变化,可能是形状、颜色、位置等,而且用户是可以看到变化过程的。而这个变化过程在 D3 里我们称之为过渡(transition)。
实现动态的 API
D3 提供了 4 个方法用于实现图形的过渡,即从状态 A 变为状态 B。transition()
该 API 的功能为启动过渡效果。其前后是图形变化前后的状态(形状、位置、颜色等等),例如:
.attr("fill","red") //初始颜色为红色.transition() //启动过渡.attr("fill","steelblue") //终止颜色为铁蓝色
D3 会自动对两种颜色(红色和铁蓝色)之间的颜色值(RGB值)进行插值计算,从而得到颜色值进行过渡。
duration()
该 API 的功能为指定过渡的持续时间,单位为毫秒。语法如下
duration(2000)
,指持续 2000 毫秒,即 2 秒。ease()
该 API 的功能为指定过渡的变化方式,常用的有:
- linear:普通的线性变化;
- circle:慢慢地到达变换的最终状态;
- elastic:带有弹跳的到达最终状态;
- bounce:在最终状态处弹跳几次;
语法形如:
ease(“bounce”)
。delay()
指定延迟的时间,表示一定时间后才开始转变,单位同样为毫秒。此函数可以对整体指定延迟,也可以对个别指定延迟。以下为语法示例:
整体延迟语法:
.transition().duration(1000).delay(500)
个别指定延迟语法:
.transition().duration(1000).delay(funtion(d,i){ return 200*i;})
阅读全文
0 0
- D3 笔记五:过渡、transition、duration、ease、delay
- 动画--过渡延迟时间 transition-delay
- 动画--过渡所需时间 transition-duration
- 【CSS3】动画--过渡延迟时间 transition-delay
- 【CSS3】动画--过渡所需时间 transition-duration
- CSS3中transition-duration参数对hover前后两种过渡时间的影响
- 过渡 transition
- CSS3笔记——过渡 Transition
- CSS3变形和动画:旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration...
- CSS3的【transition-duration】属性
- d3.js学习笔记(2)—— Transition
- CSS3 过渡之transition
- CSS3之过渡Transition
- CSS3之过渡Transition
- CSS3----过渡transition
- CSS3之过渡Transition
- CSS3之过渡Transition
- css3 transition(过渡)
- 用python+numpy+matplotalib实现梯度下降法
- JavaScript创建对象—从es5到es6
- 深入分析Java并发中volatile的实现原理
- F
- Rescue HDU
- D3 笔记五:过渡、transition、duration、ease、delay
- C++中,自定义string类,实现字符串的赋值“=”和连接函数“+”
- 数据类型初始化后的默认值
- 推荐一款makdown剪辑器-mditor
- STL游标—迭代器(itertor)的使用
- 【CSS 基础】06 盒子模型
- 【搜索入门专题1】E
- 深入理解Java虚拟机 第七章 虚拟机类加载时机与过程
- redis持久化选项