Vega-Lite双轴图表实现最近点悬停高亮交互的方法

要实现双轴折线图中悬停时自动显示最近系列的圆点和tooltip，核心是用顶层共享的悬停选择器配合条件样式控制，避免重复定义hover信号导致的冲突。具体实现步骤如下：

1. 定义共享悬停选择器 #

在图表顶层添加selection配置，创建全局的hover选择器，设置nearest: true让它自动捕捉鼠标最近的数据点，不管该点属于左轴还是右轴系列：

"selection": {
  "hover": {
    "type": "single",
    "nearest": true,
    "on": "mouseover",
    "empty": "none"
  }
}

2. 配置系列的条件高亮与Tooltip #

为每个轴的折线系列添加条件样式（比如透明度、圆点显示），并配置对应tooltip：

• 折线平时半透明，悬停时完全显示
• 单独添加圆点图层，默认隐藏，悬停时显示对应系列的圆点
• 每个系列的tooltip只展示自身数据字段

完整示例代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"date": "2020-01-01", "temp": 10, "precip": 20},
      {"date": "2020-02-01", "temp": 15, "precip": 30},
      {"date": "2020-03-01", "temp": 20, "precip": 40},
      {"date": "2020-04-01", "temp": 25, "precip": 50},
      {"date": "2020-05-01", "temp": 30, "precip": 60}
    ]
  },
  "selection": {
    "hover": {
      "type": "single",
      "nearest": true,
      "on": "mouseover",
      "empty": "none"
    }
  },
  "layer": [
    {
      "mark": {"type": "line", "color": "steelblue"},
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "temp", "type": "quantitative", "title": "Temperature"},
        "opacity": {
          "condition": {"selection": "hover", "value": 1},
          "value": 0.3
        },
        "tooltip": [
          {"field": "date", "type": "temporal"},
          {"field": "temp", "type": "quantitative", "title": "Temperature"}
        ]
      }
    },
    {
      "mark": {"type": "line", "color": "firebrick"},
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "precip", "type": "quantitative", "title": "Precipitation", "axis": {"orient": "right"}},
        "opacity": {
          "condition": {"selection": "hover", "value": 1},
          "value": 0.3
        },
        "tooltip": [
          {"field": "date", "type": "temporal"},
          {"field": "precip", "type": "quantitative", "title": "Precipitation"}
        ]
      }
    },
    {
      "mark": {"type": "circle", "size": 60},
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "temp", "type": "quantitative"},
        "color": {"value": "steelblue"},
        "opacity": {
          "condition": {"selection": "hover", "value": 1},
          "value": 0
        }
      }
    },
    {
      "mark": {"type": "circle", "size": 60},
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "precip", "type": "quantitative"},
        "color": {"value": "firebrick"},
        "opacity": {
          "condition": {"selection": "hover", "value": 1},
          "value": 0
        }
      }
    }
  ],
  "resolve": {"scale": {"y": "independent"}}
}

关键说明 #

• 不要在单个系列内重复定义hover选择器，统一用顶层共享的hover选择器避免信号冲突
• nearest: true是核心，它会让选择器忽略系列归属，只捕捉鼠标位置最近的数据点
• 单独拆分圆点图层是为了让悬停时的圆点更突出，也可以直接在折线mark里添加point配置，但分开控制样式更灵活
• resolve: {"scale": {"y": "independent"}}确保左右轴的刻度独立，符合双轴图需求

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