如何在Vega-Lite API中实现基于数值的热图文本条件着色

错误原因 #

核心错误是冗余二次聚合导致条件测试读取的字段不存在：
你已经在顶层transform中通过aggregate预计算了每个「月+日」分组的avg_temp字段，但在文本层的text编码中额外调用了.average("avg_temp")，触发了二次聚合。此时Vega-Lite会自动将二次聚合后的字段命名为average_avg_temp，你在条件测试中引用的datum['avg_temp']在当前数据上下文中不存在，所有判断条件都返回false，因此文本全部显示为默认的黑色。

正确写法 #

有两种修改方案可选：

方案1：直接使用预计算的聚合字段（推荐，性能更高） #

删除文本层编码中的冗余聚合，直接引用预计算好的avg_temp字段即可：

vl.markText({tooltip: true, clip: true})
.encode(
  // 直接用预计算的avg_temp，不需要二次聚合
  vl.text().fieldQ("avg_temp").format(".1f"),
  // 条件着色写法，直接读取存在的avg_temp字段
  vl.color().if(
    "datum.avg_temp > 26",
    vl.value("white")
  ).value("black")
)

方案2：保留二次聚合，修改测试字段名 #

如果需要保留编码侧的聚合写法，需要将条件测试中的字段名修改为Vega-Lite自动生成的聚合字段名：

vl.markText({tooltip: true, clip: true})
.encode(
  vl.text().average("avg_temp").format(".1f"),
  // 读取自动生成的二次聚合字段名
  vl.color().if(
    "datum.average_avg_temp > 26",
    vl.value("white")
  ).value("black")
)

Vega-Lite JS API 条件着色规范 #

在Vega-Lite JavaScript API中，条件着色更推荐使用.if()方法，语法更简洁，也不容易出现参数解析错误：

// 通用结构：.if(判断条件, 满足条件的值, 不满足条件的值)
vl.color().if("判断表达式", vl.value("满足时的颜色"), vl.value("不满足时的颜色"))
// 也可以把不满足的值写在后面的.value()中
vl.color().if("判断表达式", vl.value("满足时的颜色")).value("不满足时的颜色")

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