磁吸游标 & 滚动码表

折线图横向滑动带数据点磁吸吸附，顶部数值使用滚动计数器（Odometer / Ticker）实时平滑联动。在下面的图表上左右拖动/移动指针试试——数字会像老虎机一样滚过去。

实时 Demo

访问量（磁吸到最近数据点）

拖动经过两个数据点之间时，游标会"啪"地吸到最近的一个——吸附半径内线性插值，半径外自由移动

效果拆解

磁吸 = 距离判断 + 缓动：指针 x 坐标找最近数据点，距离 < 吸附半径（约 40px）时游标目标切到该点 x，游标用 rAF 阻尼追踪（系数 0.35）形成"啪"的吸附感；半径外则自由跟随。
吸附瞬间的反馈：吸附成功给游标画一圈扩散 halo（r 6→16 透明度 0.8→0），视觉确认"吸住了"。
Odometer 滚动码表：每个数字位一列，列内 0-9 十个格子纵向排，数值变化时 translateY(-digit × 行高)，transition 0.45s 带一点过冲——多位数字同时滚就是"老虎机"效果。
平滑联动：指针在两点之间移动时，显示值不是跳变而是按插值比例 lerp(v[i], v[i+1], t) 连续变化，码表就持续平滑滚动，这是"实时联动"的核心。
tooltip 跟随：绝对定位跟随游标 x，吸附时显示精确值，中间态显示插值取整。

AI 提示词

实现折线图的磁吸游标与滚动码表联动：指针横向移动时先按插值比例在相邻两数据点间 lerp 得到连续数值，顶部 Odometer 滚动计数器按该数值平滑滚动——每位数字一列纵向 0~9 格子，translateY 到当前位，transition 0.45s cubic-bezier(.22,1.2,.36,1) 带轻微过冲；当指针进入某数据点 40px 吸附半径内，游标用 rAF 阻尼（系数 0.35）吸到该点，吸附瞬间播放一圈扩散 halo 作为反馈，tooltip 显示精确值；半径外游标自由跟随显示插值；只动 transform，保证 60fps。实现折线图的磁吸游标与滚动码表联动：指针横向移动时先按插值比例在相邻两数据点间 lerp 得到连续数值，顶部 Odometer 滚动计数器按该数值平滑滚动——每位数字一列纵向 0~9 格子，translateY 到当前位，transition 0.45s cubic-bezier(.22,1.2,.36,1) 带轻微过冲；当指针进入某数据点 40px 吸附半径内，游标用 rAF 阻尼（系数 0.35）吸到该点，吸附瞬间播放一圈扩散 halo 作为反馈，tooltip 显示精确值；半径外游标自由跟随显示插值；只动 transform，保证 60fps。

码表列数由数值位数决定，位数变化时要重建列（先动画旧列高度再替换）。
提示词把"插值 + 吸附半径 + 阻尼系数"三个关键点都写死了，AI 还原度最高。