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
Author
Benbinbin
@benbinbin
Creator
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
© 2026 Observable, Inc.
Terms of service
Privacy policy
Product
About
Pricing
Documentation
Release notes
Contact us
Open source
Notebook Kit
Plot
D3
Community
Public
Forum
Bluesky
YouTube
X
Observable
Sign up
Benbinbin
0
Reply
Add comment
Subscribe to notifications
0
Learn D3: Animation | Benbinbin | Observable