SuperAPI AI 工具集

update-and-animate-charts

通用与其它

查看项目

更新于 10-16 08:10

技能介绍

用途:讲解更新与动画化 TanStack Charts 的方法,覆盖稳定定义、SVG 运动配置,以及在 resize、中断、流式更新下保持正确性。

主要能力:以“触发→检查→决策→构建→验证”为流程。定义标识是应用更新边界,标记与数据标识决定哪些元素在更新中存活。提供 svgAnimation(时长、缓动、减弱动效策略)与 motion() 渲染器两种运动契约,并强调仅在需要弹簧连续性、时序级联或滚动路径时才使用后者;静态导出、服务端输出或可能暗示错误连续性的变化不应加动画。

必要用法:仅当捕获数据或视觉策略变化时创建新定义,再用 host.update 更新;标记使用稳定 id,数据使用稳定 key。示例:defineChart({ svgAnimation: { duration: 280, easing: 'ease-out' }, marks: [barX(ranked, { id: 'ranking', x: 'value', y: 'label', key: 'id' })], scales: { x: { scale: scaleLinear, nice: true }, y: { scale: () => scaleBand().padding(0.1) } } })。

适用场景:动态排序、重排、焦点与选中保持、流式数据的受限可视窗口、快速重定向与中断验证。

限制与常见错误:每次渲染都新建定义会破坏标识并重置呈现状态;用行位置(index)作为 key 会在增删与重排时错配几何、焦点与退出动画;为普通容器开启 resize 动画会反复重启过渡、使布局落后;按索引为滚动样本做补间会把旧时间点当成新样本。正确做法是保持定义稳定、按 id 或时间戳/事件 ID 建键、默认关闭 resize 动画,并在进入、更新、退出、焦点、resize 与滚动过程中验证中断。框架适配器应围绕完整定义使用其原生记忆化原语。