Vega-Lite(Deneb)折线图：2023年最值与端点标记及文本标签问题

核心需求 #

• 绘制所有年份的折线，按Year字段区分颜色
• 单独绘制2023年的红色折线
• 在2023年折线上标记最高点、最低点、最新点，并添加显示数值的文本标签

当前问题 #

• 2023年最低温标记未遵循filter转换规则
• 文本标签受全局color编码影响，无法使用2023年标记的指定颜色
• 无法同时用window表达式标记最值、argmax实现端点标记

解决方案 #

通过Vega-Lite的**分层（layer）**设计，将不同元素拆分到独立图层处理，同时调整数据转换的顺序和范围，确保标记和标签不受全局编码干扰。以下是完整代码示例：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"name": "dataset"},
  "layer": [
    // 图层1：所有年份的折线（按Year分色）
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "Date", "type": "temporal"},
        "y": {"field": "Temperature", "type": "quantitative"},
        "color": {"field": "Year", "type": "nominal"}
      }
    },
    // 图层2：2023年单独红色折线
    {
      "mark": {"type": "line", "color": "#ff3333", "strokeWidth": 2},
      "transform": [{"filter": "datum.Year === 2023"}],
      "encoding": {
        "x": {"field": "Date", "type": "temporal"},
        "y": {"field": "Temperature", "type": "quantitative"}
      }
    },
    // 图层3：2023年的最值点+最新点标记
    {
      "mark": {"type": "circle", "color": "#ff3333", "size": 100},
      "transform": [
        {"filter": "datum.Year === 2023"},
        // 计算2023年的温度最值与最新日期
        {
          "window": [
            {"op": "max", "field": "Temperature", "as": "max_temp"},
            {"op": "min", "field": "Temperature", "as": "min_temp"},
            {"op": "argmax", "field": "Date", "as": "latest_date"}
          ],
          "frame": [null, null]
        },
        // 筛选出需要标记的点
        {
          "filter": "datum.Temperature === datum.max_temp || datum.Temperature === datum.min_temp || datum.Date === datum.latest_date.Date"
        }
      ],
      "encoding": {
        "x": {"field": "Date", "type": "temporal"},
        "y": {"field": "Temperature", "type": "quantitative"}
      }
    },
    // 图层4：2023年标记点的数值标签
    {
      "mark": {"type": "text", "color": "#ff3333", "dy": -10},
      "transform": [
        {"filter": "datum.Year === 2023"},
        {
          "window": [
            {"op": "max", "field": "Temperature", "as": "max_temp"},
            {"op": "min", "field": "Temperature", "as": "min_temp"},
            {"op": "argmax", "field": "Date", "as": "latest_date"}
          ],
          "frame": [null, null]
        },
        {"filter": "datum.Temperature === datum.max_temp || datum.Temperature === datum.min_temp || datum.Date === datum.latest_date.Date"}
      ],
      "encoding": {
        "x": {"field": "Date", "type": "temporal"},
        "y": {"field": "Temperature", "type": "quantitative"},
        "text": {"field": "Temperature", "type": "quantitative", "format": ".1f"}
      }
    }
  ],
  "resolve": {"scale": {"color": "independent"}}
}

关键说明 #

1. 分层隔离：把普通年份折线、2023年折线、标记点、文本标签拆分到独立图层，彻底避免编码冲突。
2. 数据转换优先级：先通过filter锁定2023年数据，再执行window计算，确保最值和最新日期仅基于2023年数据生成，解决最低温标记不遵循filter的问题。
3. 颜色独立控制：通过resolve: {scale: {color: "independent"}}让各图层颜色编码互不干扰，文本标签直接指定color属性，彻底摆脱全局编码影响。
4. 多条件标记：在同一个window转换中同时计算最值和最新日期，通过filter条件一次性筛选出三类目标点，解决无法同时标记的问题。

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