Vega-lite 线标记在远处显示工具提示

我在 VegaLite 中有以下图表：

(在 Vega 编辑器中打开 https://vega.github.io/editor/#/url/vega-lite/N4IgJAzgxgFgpgWwIYgFwhgF0wBwqgegIDc4BzJAOjIEtMYBXAI0poHsDp5kTykBaADZ04JAKyUAVhDYA7EABoQAEzjQATjRyZ289AGVMbKAGsABDk1Q1ZtgDMzYswBU4sMwGE2CHElk0bNlJ1FxoEOEpFFSRMFFRQBnVBNGjYziNTCEooCGIQAF8lZHUTNFBMAE8cOBThWRqlIzZBHRw0THUGOEKQOFkoNmUaWTIykAAPMbsAwWUU5RiGkErqlMxEHDZ1JGSeiqmZufRLGmsolZr0AEcGPx1YnVICpQHBLYO4WZSICoQmZvOVUuIFk3mGOwK+XyQA)

{
  "$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},
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"},
    "color": {"field": "symbol", "type": "nominal"}
  }
}

注意"tooltip": true- 我希望能够显示鼠标悬停时的值。但是，为了显示工具提示，我必须将光标精确悬停在线条数据点的单个像素上。

我想在一定距离（比如说 20 像素）处显示工具提示。或者甚至在任何地方，使用最近的数据点。规范中不需要大量额外代码就可以实现这一点吗？我特别想避免列出图例中的所有值，例如here https://vega.github.io/vega-lite/examples/interactive_multi_line_pivot_tooltip.html.

我还希望工具提示方法能够处理多个层，例如在组合折线+条形图中。

您需要将“最近”属性添加到选择参数中。此处记录了针对您的用例的一些限制和解决方法。

https://vega.github.io/vega-lite/docs/selection.html#nearest https://vega.github.io/vega-lite/docs/selection.html#nearest

Edit:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Stock prices of 5 Tech Companies over Time.",
  "data": {"url": "data/stocks.csv"},
  "encoding": {
    "x": {"field": "date", "type": "temporal"},
    "y": {"field": "price", "type": "quantitative"},
    "color": {"field": "symbol", "type": "nominal"}
  },
  "layer": [
    {"mark": {"type": "line"}},
    {
      "params": [
        {
          "name": "paintbrush",
          "select": {"type": "point", "on": "mouseover", "nearest": true}
        }
      ],
      "mark": {"type": "circle", "tooltip": true},
      "encoding": {
        "color": {
          "condition": {
            "param": "paintbrush",
            "field": "symbol",
            "type": "ordinal"
          },
          "value": "transparent"
        },
        "size": {"value": 75}
      }
    }
  ]
}