如何用原生Vega-Lite函数将日期与小时转换为Datetime？

给定如下格式的时序数据：

{"date": "2022-12-28", "hr": 10, "temp": 5.7}, 
{"date": "2022-12-28", "hr": 9, "temp": 5.0}, 
...

需要将date和hr字段合并为合法的datetime值。尝试过两种转换方式，但都存在局限性：

• 第一种转换仅对两位数小时（10-23）有效，一位数小时会被忽略：

  {"calculate": "time(datum.date + 'T' + datum.hr + ':00:00')", "as": "t"}
  

• 第二种转换仅对一位数小时有效，两位数小时会失效：

  {"calculate": "time(datum.date + 'T0' + datum.hr + ':00:00')", "as": "t"}
  

使用Vega-Lite原生的format函数，通过格式化字符串对小时数进行补零处理，确保无论一位数还是两位数小时都能生成符合ISO标准的时间字符串。

正确的转换表达式为：

{"calculate": "time(datum.date + 'T' + format(datum.hr, '%02d') + ':00:00')", "as": "t"}

其中format(datum.hr, '%02d')会自动将小时数格式化为两位数字：一位数小时补前导零（如9转为"09"，0转为"00"），两位数小时保持原样。拼接后的时间字符串始终合法，time函数可以正确解析所有情况。

{
        "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
        "description": "逐小时温度变化",
        "width": "container",
        "data": {"values": [
                  {"date": "2022-12-28", "hr": 10, "temp": 5.7}, 
                  {"date": "2022-12-28", "hr": 9, "temp": 5.0}, 
                  {"date": "2022-12-28", "hr": 8, "temp": 3.8}, 
                  {"date": "2022-12-28", "hr": 7, "temp": 3.1}, 
                  {"date": "2022-12-28", "hr": 6, "temp": 2.7}, 
                  {"date": "2022-12-28", "hr": 5, "temp": 2.1}, 
                  {"date": "2022-12-28", "hr": 4, "temp": 1.9}, 
                  {"date": "2022-12-28", "hr": 3, "temp": -1.2}, 
                  {"date": "2022-12-28", "hr": 2, "temp": 1.0}, 
                  {"date": "2022-12-28", "hr": 1, "temp": 1.2}, 
                  {"date": "2022-12-28", "hr": 0, "temp": 1.5}, 
                  {"date": "2022-12-27", "hr": 23, "temp": 2.2}, 
                  {"date": "2022-12-27", "hr": 22, "temp": 2.5}
        ]},
        "transform": [
          {"calculate": "time(datum.date + 'T' + format(datum.hr, '%02d') + ':00:00')", "as": "t"}
        ],
        "encoding": {
          "x": {"field": "t", "type": "temporal", "title": "时间"},
          "y": {"type": "quantitative", "axis": {"title": "温度[°C]"}}
        },
        "layer": [
          {"mark": {"type": "circle", "opacity": 0.75, "tooltip": true},
           "encoding": {
             "y": {"field": "temp", "title": "温度"}, 
              "color": {"field": "temp", "type": "quantitative", 
                        "scale": {"domainMid": 0, "scheme": "viridis"}, "title": "[°C]"}
           }
          }
        ]
      }

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