如何为Vega-Lite时间轴气泡图的今日参考线添加专属标签

我有一个采用虚拟数据的时间轴气泡图，其中包含一条当前日期的参考线。希望为该参考线添加标注“今日日期”的标签，但尝试添加时每个气泡都被附上了今日日期标签，需要在参考线上方添加一个清晰可读的专属标签。

原代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "width": 950,
  "height": 400,
  "transform": [
    {
      "calculate": "now()",
      "as": "today"
    }
  ],
  "encoding": {
    "x": {
      "field": "Date",
      "type": "temporal",
      "axis": {
        "grid": false,
        "format": "Q%q %Y"
      }
    },
    "y": {
      "field": "Prob",
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "circle",
        "opacity": 0.8,
        "stroke": "black",
        "strokeWidth": 1
      },
      "encoding": {
        "size": {
          "field": "Amount",
          "type": "quantitative"
        },
        "color": {
          "field": "Group",
          "type": "nominal"
        }
      }
    },
    {
      "mark": {
        "type": "circle",
        "opacity": 0.8,
        "stroke": "black",
        "strokeWidth": 1
      },
      "encoding": {
        "size": {
          "field": "Amount",
          "type": "quantitative",
          "scale": {"rangeMax": 1000}
        },
        "color": {
          "field": "Group",
          "type": "nominal"
        }
      }
    },
    {
      "mark": {
        "type": "rule",
        "opacity": 0.6
      },
      "encoding": {
        "x": {
          "field": "today",
          "type": "temporal"
        },
        "size": {"value": 1},
        "color": {"value": "grey"}
      }
    }
  ]
}

问题原因 #

之前尝试添加的文本层会遍历原数据集的每一行数据，因此每个气泡都会对应生成一个标签，而不是仅在参考线上生成一个专属标签。

解决方案 #

要实现参考线的专属标签，需要创建一个独立的单条数据源，避免和原数据集的行数绑定，同时精准定位标签位置：

修改后的完整代码 #

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "width": 950,
  "height": 400,
  "transform": [
    {
      "calculate": "now()",
      "as": "today"
    }
  ],
  "encoding": {
    "x": {
      "field": "Date",
      "type": "temporal",
      "axis": {
        "grid": false,
        "format": "Q%q %Y"
      }
    },
    "y": {
      "field": "Prob",
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "circle",
        "opacity": 0.8,
        "stroke": "black",
        "strokeWidth": 1
      },
      "encoding": {
        "size": {
          "field": "Amount",
          "type": "quantitative"
        },
        "color": {
          "field": "Group",
          "type": "nominal"
        }
      }
    },
    {
      "mark": {
        "type": "circle",
        "opacity": 0.8,
        "stroke": "black",
        "strokeWidth": 1
      },
      "encoding": {
        "size": {
          "field": "Amount",
          "type": "quantitative",
          "scale": {"rangeMax": 1000}
        },
        "color": {
          "field": "Group",
          "type": "nominal"
        }
      }
    },
    {
      "mark": {
        "type": "rule",
        "opacity": 0.6
      },
      "encoding": {
        "x": {
          "field": "today",
          "type": "temporal"
        },
        "size": {"value": 1},
        "color": {"value": "grey"}
      }
    },
    // 新增的参考线标签层
    {
      "data": {"values": [{}]}, // 创建单条独立数据
      "transform": [
        {
          "calculate": "now()",
          "as": "today"
        }
      ],
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "bottom", // 标签在参考线上方
        "dy": -5, // 距离参考线的垂直间距
        "fill": "grey",
        "fontSize": 12
      },
      "encoding": {
        "x": {
          "field": "today",
          "type": "temporal"
        },
        "y": {"value": 30}, // 固定y轴位置，靠近图表顶部
        "text": {"value": "今日日期"} // 直接设置标签文本
      }
    }
  ]
}

关键修改说明 #

1. 独立数据源：使用"data": {"values": [{}]}创建仅包含一条数据的独立数据源，确保只生成一个标签。
2. 标签定位：
   • x轴绑定today字段，和参考线保持同一位置
   • y轴用value固定位置（比如30，可根据图表高度调整），也可以用聚合函数自动定位到y轴顶部："y": {"aggregate": "max", "field": "Prob", "type": "quantitative", "offset": -10}
3. 文本样式：通过baseline、dy调整标签和参考线的间距，确保标签在参考线上方且清晰可读。

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