请求协助为Vega Lite图表添加交互式悬停高亮点功能

针对你的图表配置，可通过以下步骤实现悬停高亮功能：

1. 定义悬停选择器 #

在配置的根节点添加selection字段，创建一个触发方式为鼠标悬停的选择器：

"selection": {
  "hover": {
    "type": "single",
    "on": "mouseover",
    "clear": "mouseout",
    "fields": ["date"],
    "nearest": true
  }
}

• fields指定关联的共享字段（比如你的时间字段date），确保悬停时能匹配全系列对应的数据点
• nearest: true优化交互，自动选中鼠标附近的数据点

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

在你的线条和点标记中，通过condition属性设置悬停时的高亮样式：

线条层配置 #

{
  "mark": "line",
  "encoding": {
    "color": {"field": "category", "type": "nominal"},
    "opacity": {
      "condition": {"selection": "hover", "value": 1},
      "value": 0.2
    }
  }
}

默认线条低透明度，悬停时变为完全不透明，突出目标系列。

数据点层配置 #

{
  "mark": "point",
  "encoding": {
    "color": {"field": "category", "type": "nominal"},
    "opacity": {
      "condition": {"selection": "hover", "value": 1},
      "value": 0
    },
    "size": {"value": 60}
  }
}

数据点默认隐藏，悬停时显示，强化交互反馈。

完整核心配置示例 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 800,
  "height": 400,
  "data": {...}, // 保留你的原有数据配置
  "selection": {
    "hover": {
      "type": "single",
      "on": "mouseover",
      "clear": "mouseout",
      "fields": ["date"],
      "nearest": true
    }
  },
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "value", "type": "quantitative"}
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "color": {"field": "category", "type": "nominal"},
        "opacity": {
          "condition": {"selection": "hover", "value": 1},
          "value": 0.2
        }
      }
    },
    {
      "mark": "point",
      "encoding": {
        "color": {"field": "category", "type": "nominal"},
        "opacity": {
          "condition": {"selection": "hover", "value": 1},
          "value": 0
        },
        "size": {"value": 60}
      }
    }
  ]
}

内容的提问来源于stack exchange，提问作者Yana Trifonova