Vega-Lite非堆叠直方图Legend Binding下Tooltip显示异常求助

问题现象 #

• 选中所有图例时，Tooltip显示正常；
• 取消部分图例选择后，Tooltip会错误显示未选中系列的上方数据；
• 预期Tooltip仅展示鼠标当前悬停的选中系列数据。

解决方案 #

核心原因是未选中的系列元素虽被隐藏，但仍存在于视图中，导致Tooltip触发时捕获到这些隐藏元素的数据。可通过以下方式修复：

方案1：修改选择器配置，移除未选中系列 #

在图例绑定的选择器中添加empty: "none"，确保未选中的系列完全从视图中移除，而非仅隐藏：

"selection": {
  "legend": {
    "type": "multi",
    "fields": ["series"],
    "bind": "legend",
    "empty": "none" // 新增配置
  }
}

方案2：添加数据过滤变换，仅保留选中系列 #

通过transform过滤掉未选中的系列数据，从根源上移除无效元素：

"transform": [
  {"filter": {"selection": "legend"}} // 过滤选中的图例数据
]

同时保持选择器的基础配置：

"selection": {
  "legend": {"type": "multi", "fields": ["series"], "bind": "legend"}
}

补充：确保Tooltip配置正确 #

Tooltip需直接绑定当前数据字段，避免引用全局数据：

"tooltip": [
  {"field": "x", "type": "ordinal"},
  {"field": "series", "type": "nominal"},
  {"field": "y", "type": "quantitative"}
]

验证效果 #

修改后，取消部分图例时，未选中系列的数据会被移除或过滤，Tooltip仅显示当前悬停的选中系列数据，符合预期效果。

内容的提问来源于stack exchange，提问作者Junko Takita