当同一数据同时有表格和可视化两种表示时…

在需要同时展示数据的表格/列表视图与可视化视图（地图、图表、图、时间线）并保持选择状态同步时使用。

适用场景

解决思路

1. 将选择状态放在一个共享 store 中，由两个视图共同读写，而不是各自维护；任一视图的点击都更新同一状态并触发两边重渲染。
2. 实现双向同步：点击表格行时高亮可视化中对应元素；点击可视化元素时高亮对应表格行并将其滚动到可见区域（scroll-into-view）。
3. 支持悬停同步：悬停表格行时可视化元素轻微高亮，悬停可视化元素时表格行轻微高亮。
4. 支持清除选择：清除后两个视图都恢复默认状态。
5. 颜色编码必须一致：同一类别在表格徽章和可视化元素中使用相同颜色，集中定义（如 CATEGORY_COLORS 常量），两个渲染器从同一来源导入。
6. 共享图例只显示一次，不要在每个视图中重复。
7. 根据主视图决定布局：表格为主时表格占 60–70% 宽度，可视化作为右侧或底部伴随面板；可视化为主时可视化占 60–70%，表格作为辅助面板；等权重时用 50/50 可拖动分隔条并持久化用户偏好。
8. 移动端一次只显示一个视图，用标签或切换按钮切换，不要在小屏幕上同时显示两个视图。
9. 将只影响可视化的控件（缩放/平移、图层透明度、图层开关、重置视图）放在可视化面板内，不要放在表格工具栏。
10. 将影响共享数据的控件（筛选、时间范围、类别选择）放在两个视图之外的上方或旁边。
11. 区分悬停高亮与点击选中：悬停是临时的、指针离开即清除，两边显示轻微效果（如 50% 透明度或淡背景）；选中是持久的，直到点击别处或按 Escape 才清除，两边显示强烈明确的视觉效果（如亮边框、饱和色、选中行背景）。
12. 对悬停高亮做防抖，只在目标元素变化时更新，而不是每次 pointer-move 都更新。
13. 为条目使用稳定 ID，便于 React（或等价框架）复用元素而不重建。
14. 对 1000+ 条目的数据集，无论可视化如何都要虚拟化表格。
15. 对 canvas 或 WebGL 渲染的视图，避免每次高亮重建元素，改为更新已有元素的样式属性。
16. 按检查清单自检：选择状态是否共享而非重复；双向点击高亮是否生效；点击可视化是否滚动表格到对应行；颜色是否来自单一来源；图例是否只出现一次；可视化专属控件是否在可视化面板；悬停与选中是否视觉可区分；移动端是否有切换方式；悬停事件是否防抖。

适用边界 · 注意事项

• 不要仅为视觉丰富而添加协调视图；如果用户只看表格而忽略可视化，只会增加复杂度而无收益。
• 当两种表示并非服务于不同任务、用户不会频繁在两者间切换、或数据集小到单一视图即可胜任时，不要使用。
• 移动端小屏幕上不要尝试同时显示两个视图。