D3.js学习笔记(3)--过渡效果

动态图表

transition()

代码示例:

.attr("fill","red")         //初始颜色
.transition()               //启动过渡
.attr("fill","steelblue")   //终止颜色
PS:transition 后可跟多个属性样式
duration()

过渡时长:

.attr("fill","red")         //初始颜色
.transition()               //启动过渡
.duration(1000)             //过渡时长
.attr("fill","steelblue")   //终止颜色
ease()

过渡方式:

linear:普通的线性变化
circle:慢慢地到达变换的最终状态
elastic:带有弹跳的到达最终状态
bounce:在最终状态处弹跳几次
linear示例
circle示例
elastic示例 ![bounce示例](http://upload-images.jianshu.io/upload_images/4050650-8d98f6758b285a56.gif?imageMogr2/auto-orient/strip)

delay()

延迟执行

.transition()
.duration(1000)
.delay(500)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,331评论 0 11
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,798评论 0 2
  • W3C标准中对css3的transition这是样描述的:“css的transition允许css的属性值在一定的...
    青春前行阅读 1,427评论 0 5
  • a标签的伪类选择器 1.通过我们的观察发现a标签存在一定的状态 1.1默认状态, 从未被访问过 1.2被访问过的状...
    Jackson_yee_阅读 276评论 0 0
  • 变形--旋转 rotate() 旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间...
    阿振_sc阅读 941评论 1 5