带聚合的Vega-Lite折线图：实现远距离触发tooltip

有两种简单方法可以解决这个问题，既不用加大量额外代码，也无需枚举图例值：

方法一：扩大交互触发范围（隐藏点） #

给折线标记添加point配置，增大点的尺寸但设置透明隐藏，视觉上还是纯折线，但鼠标靠近数据点一定范围内就能触发tooltip：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {"url": "data/stocks.csv"},
  "mark": {
    "type": "line",
    "tooltip": true,
    "point": {"size": 100, "opacity": 0} // size控制触发范围，opacity设0隐藏点
  },
  "encoding": {
    "x": {"field": "date", "type": "temporal", "timeUnit": "year"},
    "y": {"field": "price", "type": "quantitative", "aggregate": "average"},
    "color": {"field": "symbol", "type": "nominal"}
  }
}

size设为100时，触发范围约20像素，你可以根据需求调整这个数值。

方法二：自动匹配最近数据点 #

通过selection配置实现鼠标悬停时自动定位最近的数据点，同时还能给折线加选中反馈：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {"url": "data/stocks.csv"},
  "selection": {
    "nearestPoint": {
      "type": "single",
      "nearest": true,
      "on": "mouseover",
      "encodings": ["x"], // 基于x轴匹配最近点
      "empty": "none"
    }
  },
  "mark": {"type": "line"},
  "encoding": {
    "x": {"field": "date", "type": "temporal", "timeUnit": "year"},
    "y": {"field": "price", "type": "quantitative", "aggregate": "average"},
    "color": {"field": "symbol", "type": "nominal"},
    "tooltip": [
      {"field": "date", "timeUnit": "year", "title": "年份"},
      {"field": "symbol", "title": "公司"},
      {"field": "price", "aggregate": "average", "title": "平均价格"}
    ],
    "opacity": {
      "condition": {"selection": "nearestPoint", "value": 1}, // 选中折线高亮
      "value": 0.3 // 未选中折线半透明
    }
  }
}

这种方式下，鼠标只要落在对应年份的x轴区域附近，就会自动匹配到最近的折线数据点，无需精准点击像素。

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