Vega-Lite图表Tooltip仅显示数据集首条数据问题求助

问题根源 #

Tooltip仅显示首条数据、无法动态匹配时间点的核心原因有两个：

1. hover参数的选择字段错误：当前配置中select.fields指定为["idealConsumption"]，这是pivot后的数值字段，无法精准关联到对应时间点的数据集行；
2. rule层未绑定x轴字段：用于触发Tooltip的rule标记没有编码x轴的date字段，导致鼠标悬停时无法匹配到对应时间点的数据。

修复方案 #

对spec中的tooltip规则层做两处关键修改：

1. 调整hover参数的选择逻辑：将select.fields改为["date"]，基于时间字段匹配对应数据行；
2. 为rule层添加x轴编码：绑定pivot后的date字段，确保每个时间点都生成对应的垂直参考线。

修改后的完整Spec #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {
    "customFormatTypes": true,
    "font": "BNPP,Arial",
    "legend": {"disable": true}
  },
  "width": "container",
  "height": "container",
  "background": "null",
  "layer": [
    {
      "mark": {"type": "line", "interpolate": "monotone"},
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal",
          "timeUnit": "yearmonthdate",
          "axis": {
            "domainColor": "lightgray",
            "tickColor": "lightgray",
            "labelColor": "#af4200",
            "labelAngle": 0,
            "labelOverlap": true,
            "grid": false
          }
        },
        "y": {
          "field": "mileage",
          "type": "quantitative",
          "title": null,
          "axis": {
            "gridDash": [5, 5],
            "domainColor": "lightgray",
            "tickColor": "lightgray",
            "labelColor": "#797979",
            "grid": false
          }
        },
        "color": {
          "type": "nominal",
          "field": "symbol",
          "scale": {
            "domain": ["consumedMileage", "idealConsumption"],
            "range": ["#af4200", "#797979"]
          }
        }
      }
    },
    {
      "mark": {
        "type": "rule",
        "strokeWidth": 1,
        "strokeDash": [4, 4],
        "strokeCap": "round",
        "color": "#797979"
      },
      "encoding": {
        "x": {
          "datum": 1666386000000,
          "type": "temporal",
          "axis": {
            "domainColor": "lightgray",
            "tickColor": "lightgray",
            "labelColor": "#af4200",
            "labelAngle": 0,
            "labelOverlap": true,
            "grid": false
          }
        }
      }
    },
    {
      "mark": {
        "type": "rule",
        "strokeWidth": 1,
        "strokeDash": [4, 4],
        "strokeCap": "round",
        "color": "#797979"
      },
      "encoding": {"y": {"datum": 8000, "type": "quantitative"}}
    },
    {
      "mark": {
        "type": "text",
        "baseline": "bottom",
        "color": "#af4200",
        "dy": -4,
        "align": "left",
        "angle": -90
      },
      "encoding": {
        "text": {"datum": "#PlannedContractEndDate"},
        "y": {"datum": 10},
        "x": {"datum": 1666386000000, "type": "temporal"}
      }
    },
    {
      "mark": {
        "type": "text",
        "baseline": "top",
        "color": "#af4200",
        "dy": 4,
        "align": "left"
      },
      "encoding": {
        "text": {"datum": "#RentalContractMileage"},
        "y": {"datum": 8000},
        "x": {"datum": 1664744400000, "type": "temporal"}
      }
    },
     {
      "transform": [{"pivot": "symbol", "value": "mileage", "groupby": ["date"]}],
      "mark": "rule",
      "encoding": {
        "x": {
          "field": "date",
          "type": "temporal"
        },
        "opacity": {
          "condition": {"value": 0.3, "param": "hover", "empty": false},
          "value": 0
        },
        "tooltip": [
          {"field": "date"},
          {"field": "consumedMileage"},
          {"field": "idealConsumption"}
        ]
      },
      "params": [{
        "name": "hover",
        "select": {
          "type": "point",
          "fields": ["date"],
          "nearest": true,
          "on": "mouseover",
          "clear": "mouseout"
        }
      }]
    }
  ],
  "data": {
    "values": [
      {
        "symbol": "consumedMileage",
        "date": "Sun, 02 Oct 2022 23:00:00",
        "mileage": 5000
      },
      {
        "symbol": "idealConsumption",
        "date": "Sun, 02 Oct 2022 23:00:00",
        "mileage": 6000
      },
      {
        "symbol": "consumedMileage",
        "date": "Sun, 06 Nov 2022 23:00:00",
        "mileage": 8000
      },
      {
        "symbol": "idealConsumption",
        "date": "Sun, 06 Nov 2022 23:00:00",
        "mileage": 7000
      },
      {
        "symbol": "consumedMileage",
        "date": "Sun, 13 Nov 2022 23:00:00",
        "mileage": 15000
      },
      {
        "symbol": "idealConsumption",
        "date": "Sun, 13 Nov 2022 23:00:00",
        "mileage": 7200
      }
    ]
  }
}

效果说明 #

修改后，鼠标悬停在图表任意位置时，会自动匹配最近的时间点，显示对应时间的consumedMileage和idealConsumption数据，同时显示半透明垂直参考线，实现动态Tooltip效果。

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