1实现原理 · 为什么它能做到
防 90% bug 的铁律：每个显示值由当前帧推导，禁止挂钟时间与库内部动画循环。
skills/chart-animation/SKILL.md
**Drive every value from the current frame — never from wall-clock time or a library's internal animation loop.**
并明确「D3 仍可用于 scale 与 shape，只是不能用它的计时器」。
把图表拆成三层可分离函数：值域映射、帧插值、显示值格式化。
skills/chart-animation/SKILL.md
| Value scale | `scaleLinear` / `scaleBand` | data units → px (height, x-position) |
动画只作用中间层，缩放与格式各自可测。
bar chart race 的两个难点：稀疏数据要插值、名次要滑动（y 由插值名次推出）。
skills/chart-animation/SKILL.md
Real datasets are sparse (yearly/monthly rows); a smooth race needs **interpolated keyframes between data rows** plus bars that slide to new ranks.
reference 强调 y 必须来自「这一帧重新排序后的名次」。
数据必须先校验再渲染：静默 NaN 会变成高度 0 的柱子，三分钟后才发现。
skills/chart-animation/references/data-pipeline.md
Treat the dataset as the single input. Parse, validate, and *fail loud* before rendering — a silent `NaN` becomes a bar of height 0 in the final MP4, which you only notice after a 3-minute render.
本 skill 数据完整性的第一道闸。
清洗规则清单化：数值强转校验、缺口显式补、按时间升序、条数上限约 12。
skills/chart-animation/references/data-pipeline.md
- **Cap item count.** Beyond ~12 bars a race is unreadable; keep top-N per frame and drop the rest, or pre-aggregate the long tail into "Other".
把可读性翻译成工程约束（上限与长尾聚合）。
计数器精度：插值数值 → 取整 → format，并用 tabular-nums 固定字宽。
skills/chart-animation/SKILL.md
Interpolate the underlying number, then format on render. Two musts: **round before formatting** (no `1287.4013`), and **fix the digit box** so the layout doesn't jump as digits change.
DP 另给 currency/percent 变体（percent 传分数、其余取整）。
节奏预算按「每个数据事件」算：每行 0.3–0.6s、关键点减速、终帧静置 2–3s。
skills/chart-animation/SKILL.md
| Per data row (race) | 0.3–0.6s | fast enough to feel alive, slow enough to track the leader |
reference 取 1.5s/行（比 SKILL.md 上限更慢），说明为轻快但可追踪。
标注只在关键时刻出现（交叉点、峰值），用时间窗淡入淡出。
skills/chart-animation/references/data-pipeline.md
const eventFrame = fps * 6.2; // when the crossover happens
「标注拐点，然后让它淡出」，不给每个数据点加标签。
验证不可省：交付物承载精确数字，一像素布局 bug 可原谅、错一位数字不可。
skills/chart-animation/SKILL.md
a one-pixel layout bug is forgivable, a wrong digit is not.
批量前先用一个代表数据集做 stills 验证。
2核心能力
01bar chart race（稀疏行插值 + 插值名次滑动 + 稳定 key）
02CSV → typed props 校验管线（数值强转、缺口填充、升序、条数上限）
03animated counter/ticker（ease-out + round + Intl + tabular-nums，含货币/百分比）
04line/area reveal（pathLength 归一化 + strokeDashoffset 画入）
05leader-relative x 轴缩放（领先条始终撑满图宽，放大差距）
06template × data 批量渲染（一个构图渲染目录下所有数据集）
07失败模式对照表（闪烁/数字抖动/像幻灯片/末帧过冲/跟不上领先者）
08无 React 的 vanilla canvas 变体（显式 frame 计数器驱动，保证可复现）
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| package | remotion（frame/interpolate/useVideoConfig） |
| package | d3-scale / d3-shape（值域映射与路径生成，仅取其数学，不用其计时器） |
| package | csv-parse（CSV → records，配 skip_empty_lines/trim） |
| cli | ffmpeg / ffprobe（仓库共享 contact-sheet.sh、probe-mp4.sh） |
| network | iart.ai（reference 尾部推广链接，具 utm 参数；仅读者点击才请求） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权，建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据（文件路径与关键语句摘要）
- scripts/: 执行本地脚本或命令: skill 目录内无自带脚本；SKILL.md/reference 指示 agent 执行 `node scripts/build-props.mjs
- 网络端点: 声明外部网络访问: 执行期无业务 API 调用；数据集由用户以 CSV/JSON 提供。
- 本地工作目录: 文件读写与工件输出: 在用户工程内写 `props/<name>.json`、`out/<name>.mp4`、`out/f-start.png`/`out/f-mid.p
审计说明： 。触发项是分级范式「依赖第三方插件、镜像、远程包」：skill 目录为纯 Markdown（无脚本、无凭证读取、无 env 读取），但交付路径必须引入远程包 remotion、d3-scale/d3-shape、csv-parse（经 npm/npx 获取执行）以及 zod 契约；同仓 `remotion-video` 已按同口径判橙，此处与之一致。**明确不成立的项**：无凭证/cookie/环境变量读取（token 扫描零实质命中）；不向外部服务上传数据（解析与渲染全在本地）；无 TLS 降级、无 `--no-verify`、无沙箱关闭、无反自动化绕过。触发条件：仅在真的解析数据并渲染视频时发生。
5第二遍独立确认
- [discrepancy] SKILL.md 是否声明了 CSV 解析依赖 — SKILL.md 通篇未提 `csv-parse`（只把 CSV→props 指向 data-pipeline.md），而 reference 直接 `import { parse } from "csv-parse/sync"`；依赖清单在 SKILL.md 层面不完整。
- [discrepancy] race 伪代码是否与 reference 的 clamp 要求一致 — SKILL.md 片段 `const f = easeInOut(t - i);` 未把 f 夹到 [0,1]，而 bar-chart-race.md 用 `Math.min(Math.max(tRow - i, 0), 1)` 并把它列入 pitfall 表（Last frame overshoots → Clamp f to [0,1]）；直接照抄 SKILL.md 片段会末帧过冲。
- [discrepancy] 示例帧号与 reference 默认节奏是否对齐 — SKILL.md 验证示例给 `--frame=149 # last = durationInFrames - 1`（即 150 帧＝5s 总长），而 reference 默认 SECONDS_PER_ROW=1.5 且示例 4 行 → 195 帧（末帧 194）。公式正确但示例数字与 reference 算例不一致。
- [ok] 数字格式化口径是否全文一致 — SKILL.md 与 data-pipeline/bar-chart-race 三处都用 Math.round() + Intl.NumberFormat(en-US) + font-variant-numeric: tabular-nums；percent 变体单独处理分数。
- [ok] 「D3 可用 scale 不可用 transition」的边界是否一致 — SKILL.md 明说 D3 仍适合 scales and shapes，只是不用它的 timers；bar-chart-race.md 实际只 import scaleLinear、无任何 .transition() 调用。
- [ok] 时长推导与 calculateMetadata 声明 — SKILL.md 要求数据相关时长在 calculateMetadata 计算，reference 用 (rows.length - 1) * SECONDS_PER_ROW * fps + hold * fps 推导总帧数，思路一致。
6结论
适合： 数据分析/产品/媒体团队把真实数据集做成可读、数字精确的动图：bar chart race、排名演变、计数器、CSV 批量出 N 条数据视频。
不适合： 需要组合式信息图而不是图表本身（用 animated-infographic）；没有可信数据源、只想做「看起来像数据」的装饰动画（本 skill 的设计前提是数据第一公民）。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload chart-animation.tar.gz
sha256:
Option B · Copy Guide for Agenta97e1c50769273d4…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 8ce2709c39.