如何在Vega-Lite中悬停图例符号时显示完整图例标签为tooltip

解决方案 #

方案1：纯Vega-Lite配置实现（推荐） #

通过自定义图例的标签配置，直接为图例项绑定完整文本的tooltip，无需额外JavaScript操作，兼容性更优。核心是在legend.label中设置tooltip属性，关联完整分类字段。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vega Legend Tooltip Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
    const vegaLiteSpec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {"category": "Long Category Name 1", "value": 10},
          {"category": "Long Category Name 2", "value": 15},
          {"category": "Long Category Name 3", "value": 20}
        ]
      },
      "mark": "bar",
      "encoding": {
        "x": {"field": "category", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative"},
        "color": {
          "field": "category",
          "type": "nominal",
          "legend": {
            "title": "Categories",
            // 为图例标签绑定完整字段值作为tooltip
            "label": {
              "tooltip": {"field": "category"}
            }
          }
        }
      }
    };

    vegaEmbed('#vis', vegaLiteSpec);
  </script>
</body>
</html>

方案2：JavaScript操作底层Vega视图 #

若需更灵活的控制，可通过Vega视图API确保DOM操作稳定生效。原代码失效原因是仅给符号元素加title，且未处理视图更新时的DOM重置问题。修正后选择完整图例项容器，并监听渲染事件维持tooltip有效性：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vega Legend Tooltip Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
    const vegaLiteSpec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {"category": "Long Category Name 1", "value": 10},
          {"category": "Long Category Name 2", "value": 15},
          {"category": "Long Category Name 3", "value": 20}
        ]
      },
      "mark": "bar",
      "encoding": {
        "x": {"field": "category", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative"},
        "color": {
          "field": "category",
          "type": "nominal",
          "legend": {"title": "Categories"}
        }
      }
    };

    vegaEmbed('#vis', vegaLiteSpec).then(result => {
      const view = result.view;

      // 定义添加tooltip的逻辑
      function addLegendTooltips() {
        // 选择所有图例项容器
        const legendItems = document.querySelectorAll('.role-legend-item');
        legendItems.forEach(item => {
          // 从标签元素中获取完整文本（即使视觉截断，textContent仍保留完整值）
          const fullLabel = item.querySelector('.role-legend-label').textContent;
          item.setAttribute('title', fullLabel);
        });
      }

      // 初始渲染完成后添加tooltip
      view.runAsync().then(addLegendTooltips);

      // 监听视图渲染事件，确保视图更新后tooltip不丢失
      view.addEventListener('render', addLegendTooltips);
    });
  </script>
</body>
</html>

关键说明 #

• 方案1是Vega-Lite原生支持的方式，无需DOM操作，稳定性更强，优先推荐。
• 方案2通过监听视图渲染事件，解决了Vega视图更新时DOM属性被重置的问题，同时选择完整图例项容器避免交互事件被拦截。

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