SuperAPI AI 工具集

build-chart-interactions

数据与分析

查看项目

更新于 10-16 04:49

技能介绍

用途

本技能面向使用 TanStack Charts 构建图表交互的场景,帮助开发者在图表中组合焦点、提示框(tooltip)、受控选择、光标、框选(brush)、缩放、键盘行为以及联动视图。其核心指导思想是:TanStack Charts 负责渲染器无关的交互机制,而应用负责已接受的语义状态、持久化、产品策略以及等价的非指针控件。资料建议按“触发 → 检查 → 决策 → 构建 → 验证”的流程推进。

主要能力

  • 原生焦点与提示框行为:先使用原生焦点和提示框,再引入受控状态。
  • 交互归属划分:明确哪些需求由图表焦点负责(最近数据点、分组提示框、对齐十字准线、键盘点导航),哪些由一方控件加受控信号负责(语义选择、自由光标、handle、框选、缩放、交互式图例),哪些由应用状态/UI 负责(共享的已接受范围、持久化、播放、编辑、丰富的固定详情)。
  • 按 key 协调图表与应用选择:使用 keyedSelection 等让图表选择与应用语义状态通过数据 key 对应,而非依赖像素。
  • 跨图表同步语义值而非像素:当多个图表需要通过各自的 scale 解析相同的 x/y 值时,使用一个 createChartCursor 控制器;十字准线呈现仍保留在各定义中,不复制 DOM 坐标,也不修改其他图表的 SVG。
  • portal 用于容器边界:优先使用原生提示框内容;当 overflow、transform 或层叠上下文裁剪了表面时,才加入 portal。只有在产品需要丰富交互内容时,才使用框架适配器的提示框主体。

使用方式

文档给出一个设置示例:从 @tanstack/charts 引入 defineChart、lineY,从 @tanstack/charts/crosshair 引入 crosshair,从 @tanstack/charts/scales/linear 引入 scaleLinear,从 @tanstack/charts/scales/point 引入 scalePoint,从 @tanstack/charts/tooltip 引入 tooltip。示例数据为若干周与对应数值,定义 marks 包含 lineY 与 crosshair,scales 使用 scalePoint 与 scaleLinear,focus 设为 'nearest-x',maxFocusDistance 设为 Number.POSITIVE_INFINITY,并启用 tooltip。文档提示:当空白区域应当清除检查时,保留默认的有限焦点距离。

适用场景

  • 需要最近数据点、分组提示框、对齐十字准线或键盘点导航。
  • 需要语义选择、自由光标、handle、框选、缩放或交互式图例。
  • 需要共享的已接受范围、持久化、播放、编辑或丰富的固定详情。
  • 需要在多个图表之间联动,并让它们通过各自的 scale 解析相同的语义值。

限制与注意事项

资料列出多个常见错误及其正确做法:

  1. 关键:不要通过修改 SVG 做焦点呈现(例如 onRender 中 insertBefore)。正确做法是使用 whenFocused 等焦点 marks。DOM 修改会绕过场景身份、SSR、Canvas、React Native、动效与清理。
  2. 高:不要对无点的规则使用焦点过滤(例如 whenFocused(ruleX(dates), { match: 'x' }))。规则不产生交互点,焦点过滤没有候选身份;应使用 focusGuideX 等当前焦点引导原语。
  3. 关键:不要把回调当作完整行为。只挂 onRangeChange 或 key 回调并不定义捕获、钳制、取消、键盘操作或归属;应使用匹配的受控控件(keyedSelection、continuousCursor、handleX、brushX 或 zoomX)并在应用状态中保存其已接受的语义值。
  4. 高:不要让提示框留在被裁剪的祖先内。overflow、transform 和层叠上下文可能困住定位正确的提示框;应使用 portal 形式。
  5. 高:不要让装饰层拥有重复的交互点。不要为同一观测的每个区域、线、点、标签和高亮层分别设置可聚焦;应选择一个语义交互归属,并用装饰、whenFocused 或 whenSelected 支持呈现。重复点会造成重复的键盘停靠、焦点候选、激活与提示框行。
  6. 高:注意丰富交互与可移植渲染之间的张力。优先使用 marks、控件、语义状态和宿主扩展,而非仅 DOM 的覆盖层;验证指针与键盘路径、静态回退、拆卸以及任何原生等价物。

参考

资料还提到交互归属与状态机相关参考,以及 coordinate-charts-with-tanstack、ship-accessible-charts、update-and-animate-charts 等技能:交互需要明确的跨表面归属、键盘对等性和更新过程中的稳定身份。文中提到的安装或依赖命令、具体平台支持、收费与价格信息,资料未提供。