Vega Visualization timeunit hoursminutes 顺序错误

Question

我有以下问题：

每天我都有运行s 从某个时间戳执行到另一个时间戳。我想在同一张图上显示每个运行（开始和结束）。我有以下代码作为测试设置。

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "Customizing time scale domain.",
  "data": {
    "values": [
      {
        "a": "December 17, 2020 15:40:00",
        "b": 5,
        "c": "December 18, 2020 01:40:00"
      },
      {
        "a": "December 18, 2020 22:10:00",
        "b": 30,
        "c": "December 19, 2020 06:10:00"
      }
    ]
  },
  "mark": "rule",
  "encoding": {
    "x": {
      "timeUnit": "hoursminutes",
      "field": "a",
      "type": "temporal",
      "axis": {"title": "hours"}
    },
    "x2": {"timeUnit": "hoursminutes", "field": "c", "type": "temporal"},
    "y": {"field": "b", "type": "quantitative"}
  }
}

显示图表时，a 和 c 的值会切换（因为轴只从 00:00 - 23:59 移动）。我可以使用 yearmonthdatehoursminutes 作为时间单位而不是 hoursminutes 但我只关心进程开始的时间和结束时间。有没有人知道如何解决这个问题？

PS: Vega online editor

跟进问题：下面的情况怎么办here

在这种情况下，我们每次执行有多个作业（= 列 b）。由于作业可以在午夜运行而第二个作业在午夜后开始，因此它们显示错误。知道如何解决这个问题吗？

谢谢！

Answer 1

听起来最好的方法是根据开始日期对数据进行标准化，然后调整轴以仅显示小时和分钟。您可以使用 timeUnit transform, a calculate transform, and an axis format specified via a d3 time format.

的组合来做到这一点

这是一个例子 (open in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "Customizing time scale domain.",
  "data": {
    "values": [
      {
        "a": "December 17, 2020 15:40:00",
        "b": 5,
        "c": "December 18, 2020 01:40:00"
      },
      {
        "a": "December 18, 2020 22:10:00",
        "b": 30,
        "c": "December 19, 2020 06:10:00"
      }
    ]
  },
  "transform": [
    {"timeUnit": "hoursminutesseconds", "field": "a", "as": "a1"},
    {
      "calculate": "time(datum.a1) + (time(datum.c) - time(datum.a))",
      "as": "c1"
    }
  ],
  "mark": "rule",
  "encoding": {
    "x": {
      "field": "a1",
      "type": "temporal",
      "axis": {"title": "hour", "format": "%H:%M"}
    },
    "x2": {"field": "c1", "type": "temporal"},
    "y": {"field": "b", "type": "quantitative"}
  },
  "width": 600
}

Vega Visualization timeunit hoursminutes 顺序错误

Vega Visualization timeunit hoursminutes wrong order

data-visualization

vega-lite

vega

graph-visualization