[5.1]节中制作了一个比较完善的图表,但它是静态的,想做出它的动态效果吗?在D3中只需要短短的几行代码即可。

这一节将涉及4个函数的使用。

1.transition()

启动转变效果只需要添加这个即可。把它加到两种状态之间,例如:

  1. .attr("fill","red")
  2. .transition()
  3. .attr("fill","steelblue")

如上代码,上下两种属性 fill 的颜色不同,中间添加一行 .transition() ,表示要从红色变为蓝色,D3会自动对颜色之间的值进行线性插值,最终在动画中会看到平滑的颜色变化。

2.duration()

指定整个转变持续多少时间,单位为毫秒。如 .duration(2000) ,是持续2000毫秒,即2秒。

3.ease()

指定转变的方式,常用的转变方式有:

  1. linear  普通的线性变化
  2. circle  慢慢地到达变换的最终状态
  3. elastic  带有弹跳的到达最终状态
  4. bounce  在最终状态处弹跳几次

调用时,形如: .ease(“bounce”)

4.delay()

指定延迟的时间,表示一定时间后才开始转变,单位同样为毫秒。这个函数可以对整体指定延迟,也可以对个别指定延迟。
    对整体指定时,如:

  1. .transition()
  2. .duration(1000)
  3. .delay(500)

这样指定,将会延迟500毫秒播放一个1000毫秒的动画,故整个动画长度为1500毫秒。

  1. .transition()
  2. .duration(1000)
  3. .delay(funtion(d,i){
  4. return 200*i;
  5. })

这样指定的话,假设有10个元素,那么第1个元素不延迟(因为 i = 0),那么第2个元素延迟200毫秒,第3个延迟400毫秒,依次类推….整个动画的长度为 200*(10-1) + 1000 = 2800 毫秒。

要制作转变效果需要用到以上四个函数,实际使用时,通常形如:

  1. .transition()
  2. .duration(3000)
  3. .ease("bounce")
  4. .delay(function(d,i){
  5. return 200*i;
  6. })

前后接转变效果的初始状态和目标状态。

本文来自:

博客为: www.ourd3js.com

csdn博客为: blog.csdn.net/lzhlzz

【 D3.js 入门系列 --- 6 】 如何让图表动起来的更多相关文章

  1. 【 D3.js 入门系列 --- 3 】 做一个简单的图表!

    前面说了几节,都是对文字进行处理,这一节中将用 D3.js 做一个简单的柱形图. 做柱形图有很多种方法,比如用 HTML 的 div 标签,或用 svg . 推荐用 SVG 来做各种图形.SVG 意为 ...

  2. 【 D3.js 入门系列 — 11 】 入门总结

    D3 新专题首页 一转眼,这个入门系列已经积累了二十二篇文章之多,我想作为 D3.js 这款数据可视化工具的入门来说已经足够了.相信仅仅要看完本系列.以后全然能够在辅以查询的情况下完毕大部分可视化工作 ...

  3. 【 D3.js 入门系列 — 1 】 第一个程序 HelloWorld

    记得以前刚上大一学 C 语言的时候,写的第一个程序就是在控制台上输出 HelloWorld .当时很纳闷,为什么要输出这个.老师解释说所有学编程入门的第一个程序都是在屏幕上输出 HelloWorld, ...

  4. 【 D3.js 入门系列 --- 2.1 】 关于如何选择,插入,删除元素

    在D3.js中,选择元素的函数有两个:select 和 selectAll . 先说明一下它们的区别: select 是选择所有指定元素的第一个 selectAll 是选择指定元素的全部(以用于后面同 ...

  5. 【 D3.js 入门系列 --- 2 】 如何使用数据和选择元素

    接着上一讲的内容,这次讨论如何选择元素和使用数据.    现在页面中有三行文字,代码为: <p>Hello World 1</p> <p>Hello World 2 ...

  6. 【 D3.js 入门系列 --- 1 】 第一个程序HelloWorld

    下面开始用D3.js处理第一个简单问题,先看下面的代码: <html> <head> <meta charset="utf-8"> <ti ...

  7. 【 D3.js 入门系列 --- 0 】 简介和安装

    D3的全称是(Data-Driven Documents),顾名思义可以知道是一个关于数据驱动的文档的javascript类库.如果你不知道什么是javascript,请先学习javascript的相 ...

  8. 【 D3.js 入门系列 --- 2 】 怎样使用数据和选择元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 接着上一讲的内容,这 ...

  9. 【 D3.js 入门系列 --- 2.1 】 关于怎样选择,插入,删除元素

    本人的个人博客首页为: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/. 转载请注明出处,谢谢. 在D3.js中,选择 ...

  10. 【 D3.js 入门系列 --- 0 】 简介及安装

    家是我的个人博客: http://www.ourd3js.com/  ,csdn博客首页为:http://blog.csdn.net/lzhlzz/.转载请注明出处,谢谢. D3的全称是(Data-D ...

随机推荐

  1. linux命令每日一练习 wc more

    wc该命令统计文件行数,字数或者字节数 wc -l 统计行数 wc -w 统计字数 wc -c 统计字节数 more 显示文件内容,类似于cat more +n 从第n行开始显示 more -n 限定 ...

  2. Read excel and put cell data into HashMap

    //Read excel row by row, put cell name and cell value to a map for each row. HashMap getExpectedResu ...

  3. String Date Calendar之间的转换

    1.Calendar 转化 String Calendar calendat = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDa ...

  4. 关于编程一些鲜为人知的真相 csdn

    <关于编程一些鲜为人知的真相>一文讲了一些编程的真相:如果把所有项目的生命周期平均一下,那么一个程序员大概10-20%的时间用来写代码,并且大多数程序员可能每天大约只有10-12行代码会进 ...

  5. 无约束优化算法——牛顿法与拟牛顿法(DFP,BFGS,LBFGS)

    简介:最近在看逻辑回归算法,在算法构建模型的过程中需要对参数进行求解,采用的方法有梯度下降法和无约束项优化算法.之前对无约束项优化算法并不是很了解,于是在学习逻辑回归之前,先对无约束项优化算法中经典的 ...

  6. STM32 Cube固件库编程之新建工程

    Cube固件库是ST现在主推的固件库,并且在它的官网已经找不到原来的标准库可供下载.Cube固件库的构架图如下 这种新式构架可以有效的加快软件工程师的工程进度. 新建一个工程项目主要包括以下的步骤: ...

  7. qt做触摸屏演示程序

    界面效果图: 参考资料: http://blog.csdn.net/orz415678659/article/details/9136575     这个最重要.. https://www.oschi ...

  8. 数据导出到excel

    jsp页面: 数据table: <form action="/export.jsp" method="post" id="expform&quo ...

  9. JS总结 本地对象2 BOM DOM

    string对象 定义一个字符: var str = "world"; str.length    返回字符长度,5 str.charAt(2) 返回字符串第2个字符(从0开始,下 ...

  10. Ruby-1

    Ruby API 文档 http://www.ruby-doc.org/core-2.0.0/ Programming Ruby http://ishare.iask.sina.com.cn/f/22 ...