Learn D3: Animation | Benbinbin | Observable
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
•ojs
Comments (1)
Benbinbin
Jan 8, 2024
该示例和 Connected scatterplot 示例类似,也是基于 `stroke-dasharray` 属性实现折线动画,不同的是在该示例中通过方法 `attrTween()` 插值(计算动画过程中的各个时间点的值),而在 Connected scatterplot 示例中是通过方法 `attr()` 直接设置目标值(过渡结束时的最终值) 关于方法 `transition.attr()` 和 `transition.attrTween()` 可以参考这一篇笔记
https://datavis-note.benbinbin.com/article/d3/core-concept/d3-concept-transition#过渡参数配置
Connected scatterplot 示例
https://observablehq.com/@benbinbin/connected-scatterplot
Reply
Add comment
Subscribe to notifications
Observable
Sign in
Benbinbin
0
Reply
Add comment
Subscribe to notifications
0
Learn D3: Animation | Benbinbin | Observable