• Y AnimationPlayground
研究工作台
  • 实验总览
    • D3
    • Lottie
    • Rive
    • Canvas
示例库
  • 示例总览
  • Three.js 示例
  • Shader 示例
  • 代码视频示例
项目
  • 版本记录
GitHubX (Twitter)

D3

v0.4 参考实现

先把数据转换为定制几何,再交给合适的运行时驱动动画。

查看旗舰作品查看技术选型
D3 几何层React 持有 DOMMotion 持有过渡
数据变换与渲染职责分离
D3 只计算比例尺、路径和 tick;React 负责元素,Motion 负责状态间过渡。

当前值

91

较上一点 +5

时间范围
用户分群
5060708090100

Geometry pipeline

  1. 01d3-array范围与汇总
  2. 02d3-scale数据到坐标
  3. 03d3-shape路径字符串
  4. 04Motion状态间插值

语义后备

当前筛选为30 天、全部信号,最新值91,较上一数据点上升5。

数据到视觉编码

通过 scale 把抽象数据映射为位置、范围和刻度。

可复用几何生成器

line、area 与 curve 只负责生成 SVG 路径,不接管 React DOM。

职责可组合

D3 提供几何输入,Motion 或原生动画负责视觉过渡。

实验结论

D3 在 React 项目中的最佳位置不是“整套图表框架”,而是可靠的数据变换与几何工具箱。让 React 持有元素生命周期,再把生成的数值和路径交给 Motion,可以同时保留声明式状态与 D3 的数学能力。

应该负责

  • 比例尺、范围、tick、聚合与数据几何。
  • 为 SVG、Canvas 或其他运行时生成稳定输入。

不应该负责

  • 不接管已经由 React 管理的 DOM 生命周期。
  • 不自动成为所有数据动画的播放运行时。