如何构建可动态填充系列名称的Vega工具提示？

嘿，这个需求完全可以实现！Vega的transform和signal机制刚好能搞定这种动态tooltip的场景，不用硬编码那些系列字段。我给你理清楚具体怎么做：

一、先把动态系列转成统一格式（关键步骤） #

如果你的数据是宽格式（比如每个系列对应一个字段，像AAPL、AMZN这种），首先用fold变换把它转成长格式——这样不管后续新增多少系列，都能统一处理，不用修改图表配置。

首先定义一个信号来自动提取所有系列字段（排除掉x轴的字段，比如日期date），再用这个信号做fold变换：

{
  "signals": [
    {
      "name": "seriesFields",
      "update": "filter(Object.keys(data('source_0')[0]), k => k !== 'date')"
    }
  ],
  "data": [
    {
      "name": "source",
      "url": "你的数据地址"
    },
    {
      "name": "transformed",
      "source": "source",
      "transform": [
        {
          "fold": {"signal": "seriesFields"},
          "as": ["seriesName", "value"]
        }
      ]
    }
  ]
}

这样所有动态的系列都会被转成seriesName（系列名）和value（对应值）的结构，后续处理就灵活多了。

二、动态生成带排序的Tooltip #

接下来我们要实现：鼠标 hover 到图表某位置时，自动收集该位置所有系列的数据，按值排序后生成tooltip。

1. 监听hover事件获取当前位置 #

先定义一个信号来保存鼠标hover时的x轴值（比如日期）：

{
  "signals": [
    {
      "name": "hoverX",
      "value": null,
      "on": [
        {
          "events": "mark:mouseover", // 这里的mark换成你图表里的标记类型，比如line/rect
          "update": "datum.date"
        },
        {
          "events": "mark:mouseout",
          "update": "null"
        }
      ]
    }
  ]
}

2. 动态生成排序后的Tooltip数组 #

再定义一个信号，根据hoverX筛选对应位置的所有系列数据，按值降序排序后生成tooltip的结构：

{
  "signals": [
    // 上面的hoverX信号
    {
      "name": "dynamicTooltip",
      "update": "hoverX ? data('transformed').filter(d => d.date === hoverX).map(d => {
        return {
          title: d.seriesName,
          value: d.value,
          type: 'quantitative'
        };
      }).sort((a, b) => b.value - a.value) : []"
    }
  ]
}

3. 绑定Tooltip到标记上 #

最后在你的图表标记（比如折线、矩形）里，把tooltip绑定到这个动态信号：

{
  "marks": [
    {
      "type": "line",
      "from": {"data": "transformed"},
      "encode": {
        "enter": {
          "x": {"field": "date", "type": "temporal"},
          "y": {"field": "value", "type": "quantitative"},
          "color": {"field": "seriesName", "type": "nominal"}
        },
        "tooltip": {"signal": "dynamicTooltip"}
      }
    }
  ]
}

三、简化版（不需要动态排序的情况） #

如果不需要随光标位置动态排序，只是想自动生成所有系列的tooltip，直接用信号生成固定的tooltip模板就行：

{
  "signals": [
    {
      "name": "seriesFields",
      "update": "filter(Object.keys(data('source')[0]), k => k !== 'date')"
    },
    {
      "name": "staticTooltip",
      "update": "seriesFields.map(field => {
        return {field: field, type: 'quantitative'};
      })"
    }
  ],
  "marks": [
    {
      "type": "rect",
      "encode": {
        "tooltip": {"signal": "staticTooltip"}
      }
    }
  ]
}

这样不管你的数据新增多少系列，tooltip都会自动包含所有系列的字段，完全不需要手动修改配置～

备注：内容来源于stack exchange，提问作者NeilMacMullen