无法在 Vega 的自定义选择中使用组合时间单位

问题描述

我正在尝试创建一个自定义选择框，而不是用于在 Vega 中更改信号的内置选择框。但是当我使用组合时间单位时，我不断收到错误消息，而内置选择框不会显示此错误。我设法在他们在文档中提供的示例中重现了错误。

这是他们的示例代码，其中我刚刚添加了 ['year','month'] 单位。这段代码工作得很好：

<head>
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="view"></div>
  <script>
    var myView = {
      "$schema": "https://vega.github.io/schema/vega/v5.json","description": "A bar chart of flight statistics,aggregated by the selected time unit.","width": 600,"height": 300,"padding": 5,"autosize": {"type": "fit","resize": true,"contains": "padding"},"title": {
        "text": "U.S. Flight Statistics","subtitle": "20k Sample,January - march 2001","subtitleFontStyle": "italic","frame": "group","anchor": "start","offset": 10
      },"signals": [
        {
          "name": "timeunit","value": ["day"],"bind": {"input": "select","options": [
            ["year","month"],["year"],["month"],["date"],["week"],["day"],["hours"]
          ]}
        },{
          "name": "measure","value": "delay","options": ["count","delay"]}
        },{
          "name": "title","update": "measure == 'delay' ? 'Average Delay (min)' : 'Number of Flights'"
        }
      ],"data": [
        {
          "name": "flights","url": "./flights-20k.json","format": {"type": "json","parse": "auto"},"transform": [
            {
              "type": "timeunit","field": "date","units": {"signal": "timeunit"},"signal": "tbin"
            },{
              "type": "aggregate","groupby": ["unit0"],"ops": ["count","average"],"fields": [null,"delay"],"as": ["count","delay"]
            }
          ]
        }
      ],"scales": [
        {
          "name": "xscale","type": "band","range": "width","padding": 0.05,"round": true,"domain": {"signal": "timeSequence(tbin.unit,tbin.start,tbin.stop)"}
        },{
          "name": "yscale","type": "linear","range": "height","domain": {"data": "flights","field": {"signal": "measure"}},"zero": true,"nice": true
        }
      ],"axes": [
        { "orient": "bottom","scale": "xscale","formatType": "time","format": {"signal": "timeUnitSpecifier(tbin.units,{hours: '%H'})"} },{ "orient": "left","scale": "yscale","tickCount": 7,"title": {"signal": "title"} }
      ],"marks": [
        {
          "type": "rect","from": {"data": "flights"},"encode": {
            "update": {
              "x": {"scale": "xscale","field": "unit0"},"width": {"scale": "xscale","band": 1},"y": {"scale": "yscale","y2": {"scale": "yscale","value": 0},"fill": {"value": "steelblue"},"tooltip": {"signal": "{timeunit: timeFormat(datum.unit0,timeUnitSpecifier(tbin.units)),count: format(datum.count,',') + ' flights',delay: format(datum.delay,'.1f') + ' min (avg)'}"}
            },"hover": {
              "fill": {"value": "firebrick"}
            }
          }
        }
      ]
    };

    vegaEmbed(
      '#view',myView
    );
  </script>
</body>

在此版本中，我设置了一个自定义选择框字段，结果显示 ERROR Error: "Invalid time unit: year,month."。请注意，如果我删除选项列表中的 ["year","month"]，自定义选择框也能正常工作：

<head>
  <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
  <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
</head>
<body>
  <div id="view"></div>
  <script>
    let timeScales = [["year",["hours"]]
    var timeUnitSelect = document.createElement('select');
    timeUnitSelect.name = "timeunit";
    for (var i = 0; i < timeScales.length; i++) {
        var option = document.createElement("option");
        option.value = timeScales[i].join(',');
        option.text = timeScales[i].join(',');
        timeUnitSelect.appendChild(option);
    }
    document.body.appendChild(timeUnitSelect);

    var myView = {
      "$schema": "https://vega.github.io/schema/vega/v5.json","bind": {"element": timeUnitSelect}
        },myView
    );
  </script>
</body>

这是一个 Vega 错误还是我做错了什么？

（如果您想尝试，这是我正在使用的演示数据集：https://raw.githubusercontent.com/vega/vega-datasets/master/data/flights-20k.json）

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

forms forms forms javascript vega