data-visualization - Vega Visualization timeunit hoursminutes 顺序错误

Question

我有以下问题:

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

{
  "$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 但我只关心进程开始的时间和结束时间。 有没有人知道如何解决这个问题？

附言:Vega online editor

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

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

谢谢!

Answer 1

听起来最好的方法是根据开始日期对数据进行标准化，然后调整轴以仅显示小时和分钟。您可以使用 timeUnit transform 的组合来做到这一点, 一个 calculate transform ，以及通过 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
}