【 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
版权声明:本文博客原创文章。博客,未经同意,不得转载。
【 D3.js 入门系列 --- 6 】 如何使移动图表的更多相关文章
- 【 D3.js 入门系列 --- 6 】 如何让图表动起来
[5.1]节中制作了一个比较完善的图表,但它是静态的,想做出它的动态效果吗?在D3中只需要短短的几行代码即可. 这一节将涉及4个函数的使用. 1.transition() 启动转变效果只需要添加这个即 ...
- 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld
记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...
- 【 D3.js 入门系列 — 11 】 入门总结
D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...
- 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld
下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...
- 【 D3.js 入门系列 --- 3 】 做一个简单的图表!
前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...
- 【 D3.js 入门系列 --- 2.1 】 关于如何选择,插入,删除元素
在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...
- 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素
接着上一讲的内容,这次讨论如何选择元素和使用数据. 现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...
- 【 D3.js 入门系列 --- 0 】 简介和安装
D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...
- 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...
- 【 D3.js 入门系列 --- 2.1 】 关于怎样选择,插入,删除元素
本人的个人博客首页为: http://www.ourd3js.com/ ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...
随机推荐
- 正确理解Spring事务和数据库事务和锁
Lock wait timeout exceeded; try restarting transaction解决方案 参考文章 Spring中@Transactional事务回滚 http://www ...
- js课程 1-5 js如何测试变量的数据类型
js课程 1-5 js如何测试变量的数据类型 一.总结 一句话总结:用typeof()方法. 1.js如何判断变量的数据类型? 用typeof()方法. 13 v=10; 14 15 if(typeo ...
- arm交叉编译Valgrind
1. wget http://valgrind.org/downloads/valgrind-3.9.0.tar.bz2 tar xvf valgrind-3.9.0.tar.bz2 cd valgr ...
- JQuery中Ajax详细参数使用案例
JQuery中Ajax详细参数使用案例 参考文档:http://www.jb51.net/shouce/jquery1.82/ 参考文档:http://jquery.cuishifeng.cn/jQu ...
- dot-- 资源汇总
http://graphviz.org/doc/info/attrs.htmlhttp://graphs.grevian.org/http://graphs.grevian.org/exampleht ...
- 【转载】FormsAuthenticationTicket 对象
1.使用Forms验证存储用户自定义信息 Forms验证在内部的机制为把用户数据加密后保存在一个基于cookie的票据FormsAuthenticationTicket中,因为是经过特殊加密的,所以应 ...
- 前端切图:一个好看的表格css样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- matlab 机器学习相关函数、api
matlab 对数据集的默认组织方式是,X∈Rd×N d:行数,表示特征向量的长度: N:列数,表示样本的数目: 1. 模型.预测.mse % 加载 matlab 内置数据到内存 X = abalon ...
- MapKit
MapKit MapKit框架的使用 nMapKit框架使用前提 p导入框架 p p导入主头文件 #import <MapKit/MapKit.h> MapKit框架使用须知 pMapKi ...
- NOI模拟 颜色 - 带修莫队/树套树
题意: 一个颜色序列,\(a_1, a_2, ...a_i\)表示第i个的颜色,给出每种颜色的美丽度\(w_i\),定义一段颜色的美丽值为该段颜色的美丽值之和(重复的只计算一次),每次都会修改某个位置 ...