如何在Vega-Lite中搭配独立Y轴使用Tooltip？

当启用"resolve": { "scale": {"y": "independent"}}后，Tooltip失效的核心原因是第三个图层（rule标记）未绑定任何Y轴尺度。Vega-Lite中point类型的hover选择需要同时匹配x和y坐标，独立Y轴下没有统一的Y尺度参考，导致无法触发tooltip。

以下是修复后的完整配置，关键修改点已标注：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.0.json",
  "title": "",
  "width": "container",
  "config": {
    "customFormatTypes": true,
    "axis": {
      "labelFont": "Roboto",
      "labelFontSize": 12,
      "labelFontWeight": 400,
      "labelColor": "0x5f6368"
    },
    "legend": {
      "symbolOpacity": 1,
      "orient": "bottom",
      "direction": "horizontal",
      "columns": 4
    }
  },
  "datasets": {
    "dataset_id_1": [
      {"value": 12, "date": "2022-01-10T14:00:00.000Z"},
      {"value": 22, "date": "2022-02-10T14:00:00.000Z"},
      {"value": 66, "date": "2022-03-10T14:00:00.000Z"},
      {"value": 33, "date": "2022-04-10T14:00:00.000Z"}
    ],
    "dataset_id_2": [
      {"value": 22, "date": "2022-03-10T14:00:00.000Z"},
      {"value": 12, "date": "2022-04-10T14:00:00.000Z"},
      {"value": 96, "date": "2022-05-10T14:00:00.000Z"},
      {"value": 33, "date": "2022-06-10T14:00:00.000Z"}
    ],
    "dataset_id_3": [
      {
        "value": 12,
        "date": "2022-01-10T14:00:00.000Z",
        "line": "Holy Handgrenades"
      },
      {
        "value": 22,
        "date": "2022-02-10T14:00:00.000Z",
        "line": "Holy Handgrenades"
      },
      {
        "value": 66,
        "date": "2022-03-10T14:00:00.000Z",
        "line": "Holy Handgrenades"
      },
      {
        "value": 33,
        "date": "2022-04-10T14:00:00.000Z",
        "line": "Holy Handgrenades"
      },
      {
        "value": 22,
        "date": "2022-03-10T14:00:00.000Z",
        "line": "Vorpol Rabbits"
      },
      {
        "value": 12,
        "date": "2022-04-10T14:00:00.000Z",
        "line": "Vorpol Rabbits"
      },
      {
        "value": 96,
        "date": "2022-05-10T14:00:00.000Z",
        "line": "Vorpol Rabbits"
      },
      {
        "value": 33,
        "date": "2022-06-10T14:00:00.000Z",
        "line": "Vorpol Rabbits"
      }
    ]
  },
  "layer": [
    {
      "data": {"name": "dataset_id_2"},
      "transform": [{"calculate": "'Vorpal Rabbits'", "as": "c"}],
      "mark": {"type": "line", "strokeWidth": 2, "stroke": "red"},
      "encoding": {
        "y": {
          "field": "value",
          "type": "quantitative",
          "axis": {"title": "Incidents"}
        },
        "x": {
          "timeUnit": "yearmonthdate",
          "field": "date",
          "title": "",
          "axis": {"labelFlush": true, "tickCount": 5}
        },
        "color": {
          "field": "c",
          "scale": {"domain": ["Vorpol Rabbits"], "range": ["red"]},
          "title": ""
        },
        // 添加该图层的tooltip
        "tooltip": [
          {"field": "date", "timeUnit": "yearmonthdate", "type": "temporal"},
          {"field": "value", "type": "quantitative", "title": "Vorpal Rabbits"}
        ]
      }
    },
    {
      "data": {"name": "dataset_id_1"},
      "transform": [{"calculate": "'Holy Handgrenades'", "as": "c"}],
      "mark": {"type": "line", "strokeWidth": 2},
      "encoding": {
        "y": {
          "field": "value",
          "type": "quantitative",
          "axis": {"title": "Incidents"}
        },
        "x": {
          "timeUnit": "yearmonthdate",
          "field": "date",
          "title": "",
          "axis": {"labelFlush": true, "tickCount": 5}
        },
        "stroke": {
          "scale": {"range": ["green"]},
          "field": "c",
          "legend": {"title": ""}
        },
        // 替换无效的tooltip字段
        "tooltip": [
          {"field": "date", "timeUnit": "yearmonthdate", "type": "temporal"},
          {"field": "value", "type": "quantitative", "title": "Holy Handgrenades"}
        ]
      }
    },
    {
      "data": {"name": "dataset_id_3"},
      "transform": [{"pivot": "line", "value": "value", "groupby": ["date"]}],
      "mark": "rule",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        // 添加Y轴编码，关联数据集的Y尺度并隐藏轴
        "y": {
          "field": "Holy Handgrenades",
          "type": "quantitative",
          "axis": null
        },
        "opacity": {
          "condition": {"value": 0.3, "param": "hover", "empty": false},
          "value": 0
        },
        "tooltip": [
          {"field": "date", "timeUnit": "yearmonthdate", "type": "temporal"},
          {"field": "Holy Handgrenades", "type": "quantitative", "title": "Holy Handgrenades"},
          {"field": "Vorpol Rabbits", "type": "quantitative", "title": "Vorpol Rabbits"}
        ]
      },
      "params": [
        {
          "name": "hover",
          "select": {
            "type": "point",
            "fields": ["date"],
            "nearest": true,
            "on": "mouseover",
            "clear": "mouseout"
          }
        }
      ]
    }
  ],
  "resolve": { "scale": {"y": "independent"}}
}

主要修复点：

• 给rule图层添加Y轴编码，绑定到数据集的Y字段并隐藏该轴，确保hover选择能正确识别坐标位置。
• 修复前两个图层的tooltip配置：替换原第二层无效的tooltip字段，给第一层补充tooltip配置，提升交互体验。
• 调整第二层的stroke颜色范围，匹配单个数据系列的需求。

修改后，独立Y轴和tooltip可同时正常工作，hover时既能显示规则线，也能展示对应日期的所有数据值。

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