Vega-Lite图例悬停高亮异常：如何高亮/选中所有同色组件？

问题原因 #

悬停图例仅高亮单个/最后一个条目，核心原因是图例选择逻辑未正确关联同分类的所有数据标记：

• 默认情况下，Vega-Lite的图例交互若未配置多选选择器，只会响应单个数据点的匹配；
• 若图表存在多层数据分组，未明确绑定图例选择到目标分类字段，会导致只有最后匹配的条目被高亮。

实现全同色组件高亮的方法 #

要实现悬停图例时高亮所有同色组件，需通过自定义选择交互和条件样式绑定完成，具体步骤如下：

1. 定义多选选择器 #

添加selection配置，指定类型为multi，绑定到图例的hover事件，关联颜色分类字段：

"selection": {
  "legend_hover": {
    "type": "multi",
    "fields": ["你的颜色分类字段名"],
    "bind": "legend",
    "on": "mouseover",
    "clear": "mouseout"
  }
}

2. 配置标记的条件样式 #

在图表mark中，通过opacity（或color）的条件判断，根据选择状态高亮选中分类的所有标记，淡化未选中项：

"mark": {
  "type": "你的标记类型（如bar/point）",
  "opacity": {
    "condition": {"selection": "legend_hover", "value": 1},
    "value": 0.2
  }
}

适配示例的核心配置片段 #

针对你的示例图表，修改后的核心配置如下：

{
  "data": {...}, // 保留原有数据源配置
  "selection": {
    "legend_hover": {
      "type": "multi",
      "fields": ["category"], // 替换为实际颜色分类字段
      "bind": "legend",
      "on": "mouseover",
      "clear": "mouseout"
    }
  },
  "mark": {
    "type": "bar",
    "opacity": {
      "condition": {"selection": "legend_hover", "value": 1},
      "value": 0.2
    }
  },
  "encoding": {
    "x": {...}, // 保留原有X轴配置
    "y": {...}, // 保留原有Y轴配置
    "color": {"field": "category", "type": "nominal"},
    ... // 其他编码配置
  }
}

额外说明 #

• 若需实现点击切换选中状态，只需将on事件改为click，并移除clear配置；
• 除透明度外，还可通过修改color、size等属性实现更明显的高亮效果。

内容的提问来源于stack exchange，提问作者Riyad Bakhshiyev