如何在Vega-Lite中实现无需悬停的多Tooltip持久化显示？

核心思路是用自定义标记（mark）模拟tooltip，通过点击事件维护选中数据点集合，动态渲染这些自定义tooltip，替代原生tooltip的临时触发逻辑。

具体实现步骤 #

1. 定义存储选中数据的信号 #

添加一个signal来保存所有被点击选中的数据点，初始为空数组，实现点击toggle选中/取消的逻辑：

"signals": [
  {
    "name": "selectedPoints",
    "value": [],
    "on": [
      {
        "events": {"type": "click", "mark": "point"},
        "update": "indexof(selectedPoints, datum) > -1 ? remove(selectedPoints, indexof(selectedPoints, datum)) : concat(selectedPoints, [datum])"
      }
    ]
  }
]

2. 添加自定义tooltip标记 #

在图表的layer中新增一层，用text或rect+text组合模拟tooltip，基于selectedPoints数组渲染：

"layer": [
  // 原图表的点标记层
  {
    "mark": "point",
    "encoding": {
      "x": {"field": "x", "type": "quantitative"},
      "y": {"field": "y", "type": "quantitative"}
    }
  },
  // 自定义tooltip层
  {
    "data": {"name": "selectedPoints"},
    "mark": {
      "type": "text",
      "align": "left",
      "baseline": "bottom",
      "dx": 8,
      "dy": -8,
      "fill": "#333",
      "fontSize": 12,
      "background": "#fff",
      "padding": 4,
      "stroke": "#ccc",
      "strokeWidth": 1
    },
    "encoding": {
      "x": {"field": "x", "type": "quantitative"},
      "y": {"field": "y", "type": "quantitative"},
      "text": {"field": "tooltipContent", "type": "nominal"}
    }
  }
]

若需要多行复杂tooltip，可嵌套rect和多个text标记组合实现。

3. 优化交互体验 #

• 保留原生hover tooltip作为临时预览：在原point标记中添加tooltip配置，方便点击前快速查看内容。
• 可选添加清空按钮：通过信号重置selectedPoints为空数组，HTML中对应添加按钮即可：

"signals": [
  // 之前的selectedPoints信号
  {
    "name": "clearSelected",
    "on": [
      {
        "events": {"type": "click", "element": "#clearBtn"},
        "update": "selectedPoints = []"
      }
    ]
  }
]

关键说明 #

原生Vega-Lite的tooltip是基于hover事件的临时元素，无法直接持久化多个实例，自定义标记方案是最可靠的替代方式，且样式、位置完全可控，能匹配原生tooltip视觉效果或定制更复杂内容。

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