Codes►前端

03 d3动画

03 动画

3.pdf
2-数据可视化编程2023-基础-第二节.mp4
3-数据可视化编程2023-动画-第三节.mp4
!8-数据可视化编程2023-层次-第八节.mp4

动画概览

  • 动画 D3.js的Transition模块：
    • d3.transition与时长控制
    • 动画的过度（Ease）
    • 动画的同步
    • 动画的继承
    • 动画的插值
    • 动画的循环
  • 基于动画绘制动态散点图
    • 数据的清洗与预处理
  • 基于动画绘制追逐柱状图
  • Tip：数字的格式化
  • Tip：图元的起始状态

D3-transition

  • 引用D3.js文档：‘Selection-like’ interface。
  • D3的selections后调用transition，将后续的.attr(…)加以动画效果。
  • selections.transition().duration(ms).attr(type, value)
    • ms是毫秒，故1000表示动画持续1秒钟。
    • e.g., d3.select(“#my_rect”).transition().duration(2000).attr(“width”, “400”);
    • 即用两秒钟(2000毫秒)的时间把选择图元的宽变成400。
  • 同d3.selections，支持链式调用
1
d3.select(‘#my_rect’).transition().duration(1000).attr(…).attr(…).attr(…)

只有transition()后面的.attr(…)会有动画效果。 

1
d3.select(‘#my_rect’).attr(…).transition().duration(1000).attr(…)

第一个attr没有动画效果，第二个有动画效果
动画Demo d3动画特效针对svg标签

1
2
3
4
5
6
7
8
<svg width="960" height="400" id="mainsvg" class="svgs" style='display: block; margin: 0 auto;'>
			<rect id="my_rect" x="10" y="200" width="200" height="30" stroke="black" fill="#69b3a2" stroke-width="1" />
		</svg>
<script>
	d3.select("#my_rect")
		.transition().duration(2000)
		.attr("width", "400");
</script>

动画的过渡

ease，动画过渡的方式。
通过链式调用的方式作用在transition对象后：

1
d3.select("#my_rect").transition().duration(2000).ease(d3.easeLinear).attr(…)
  • D3提供多种Ease函数供选择：
    • d3.easeCubic 默认，从加速到减速
    • d3.easeLinear 线性
    • d3.easeElastic 弹射
    • d3.easeBounce 弹跳
    • d3.easeExp 突变

动画的同步

通常，可视化作品都需要多个图元执行多个动画…
‘显式’定义Transition对象：
let transition = d3.transition().duration(ms)
并让其与多个图元共享，即所有绑定的图元会同步播放动画：

1
2
rects.transition(transition).attr(…).attr(…) 
circles.transition(transition).attr(…).attr(…)

等待一个transition全部相关的图元执行完毕：
await transition.end();
异步函数会不等待调用执行完直接进入下一条语句
await会强制等待异步函数执行完毕
JavaScript异步：
async：将函数转换成异步函数，即把返回值包装成一个Promise对象
await：等待异步函数执行结束

动画的继承

动画的插值

动画的循环

基本原则

基本原则

实例