Vega-Lite 分级折线图

Question

我目前很喜欢 Vega-Lite，但我运行遇到了一个问题，虽然我尝试了很多不同的东西，但我似乎无法弄清楚。

有没有办法让下面的 Vega-Lite 图表在边缘开始和结束而不是 starting/ending 在 bin 的中间？

const data = [
  { "start_time": "2021-07-10T00:00:00Z", "end_time": "2021-07-10T01:00:00Z", "value": 30 },
  { "start_time": "2021-07-10T01:00:00Z", "end_time": "2021-07-10T02:00:00Z", "value": 100 },
  { "start_time": "2021-07-10T02:00:00Z", "end_time": "2021-07-10T03:00:00Z", "value": 190 },
  { "start_time": "2021-07-10T03:00:00Z", "end_time": "2021-07-10T04:00:00Z", "value": 120 },
  { "start_time": "2021-07-10T04:00:00Z", "end_time": "2021-07-10T05:00:00Z", "value": 70 },
  { "start_time": "2021-07-10T05:00:00Z", "end_time": "2021-07-10T06:00:00Z", "value": 60 },
  { "start_time": "2021-07-10T06:00:00Z", "end_time": "2021-07-10T07:00:00Z", "value": 33 },
  { "start_time": "2021-07-10T07:00:00Z", "end_time": "2021-07-10T08:00:00Z", "value": 127 },
  { "start_time": "2021-07-10T08:00:00Z", "end_time": "2021-07-10T09:00:00Z", "value": 200 },
  { "start_time": "2021-07-10T09:00:00Z", "end_time": "2021-07-10T10:00:00Z", "value": 50 },
  { "start_time": "2021-07-10T10:00:00Z", "end_time": "2021-07-10T11:00:00Z", "value": 60 },
  { "start_time": "2021-07-10T11:00:00Z", "end_time": "2021-07-10T12:00:00Z", "value": 70 },
  { "start_time": "2021-07-10T12:00:00Z", "end_time": "2021-07-10T13:00:00Z", "value": 80 },
  { "start_time": "2021-07-10T13:00:00Z", "end_time": "2021-07-10T14:00:00Z", "value": 90 },
  { "start_time": "2021-07-10T14:00:00Z", "end_time": "2021-07-10T15:00:00Z", "value": 100 },
  { "start_time": "2021-07-10T15:00:00Z", "end_time": "2021-07-10T16:00:00Z", "value": 22 },
  { "start_time": "2021-07-10T16:00:00Z", "end_time": "2021-07-10T17:00:00Z", "value": 190 },
  { "start_time": "2021-07-10T17:00:00Z", "end_time": "2021-07-10T18:00:00Z", "value": 37 },
  { "start_time": "2021-07-10T18:00:00Z", "end_time": "2021-07-10T19:00:00Z", "value": 33 },
  { "start_time": "2021-07-10T19:00:00Z", "end_time": "2021-07-10T20:00:00Z", "value": 150 },
  { "start_time": "2021-07-10T20:00:00Z", "end_time": "2021-07-10T21:00:00Z", "value": 170 },
  { "start_time": "2021-07-10T21:00:00Z", "end_time": "2021-07-10T22:00:00Z", "value": 130 },
  { "start_time": "2021-07-10T22:00:00Z", "end_time": "2021-07-10T23:00:00Z", "value": 200 },
  { "start_time": "2021-07-10T23:00:00Z", "end_time": "2021-07-10T24:00:00Z", "value": 55 }
];

const spec = {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "autosize": {
    "type": "fit",
    "resize": true,
    "contains": "content"
  },
  "height": 150,
  "width": "container",
  "data": { "values": data },
  "mark": {
    "type": "line",
    "point": true
  },
  "encoding": {
    "x": {
      "field": "start_time",
      "bin": { "binned": true },
      "type": "temporal",
      "title": "Time"
    },
    "x2": {
      "field": "end_time"
    },
    "y": {
      "field": "value",
      "type": "quantitative",
      "title": "Count"
    }
  }
};

vegaEmbed('#vis', spec);

#vis {
  width: 100%;
}

<script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>

<div id="vis"></div>

Answer 1

据我所知至少有两种方法：

Band ：在 x 编码中添加 bandPosition （设计更简单） See Vega Editor

  "x": {
    ...,
    "bandPosition": 0,
    "scale": { "domain": ["2021-07-10T00:00:00Z", "2021-07-10T23:00:00Z"]},
  },

Axis : 在x编码的axis中添加tickOffset和labelOffset（ticks/labels是分开的，更可控像素) See Vega Editor

  "x": {
    ...,
    "axis": { "tickOffset": 10, "labelOffset": 10 }
  },

Answer 2

您可以按 x 轴的比例提供填充，这样您就可以消除间距。还有其他配置，例如 innerPadding，您可以在文档中查看。但是填充似乎起作用了。还注意到通过删除 x2 编码给出了与边缘连接的 start/end 相同的结果。请参考 editor 并在下面截取：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "autosize": {"type": "fit", "resize": true, "contains": "content"},
  "height": 150,
  "width": "container",
  "data": {
    "values": [
      {
        "start_time": "2021-07-10T00:00:00Z",
        "end_time": "2021-07-10T01:00:00Z",
        "value": 30
      },
      {
        "start_time": "2021-07-10T01:00:00Z",
        "end_time": "2021-07-10T02:00:00Z",
        "value": 100
      },
      {
        "start_time": "2021-07-10T02:00:00Z",
        "end_time": "2021-07-10T03:00:00Z",
        "value": 190
      },
      {
        "start_time": "2021-07-10T03:00:00Z",
        "end_time": "2021-07-10T04:00:00Z",
        "value": 120
      },
      {
        "start_time": "2021-07-10T04:00:00Z",
        "end_time": "2021-07-10T05:00:00Z",
        "value": 70
      },
      {
        "start_time": "2021-07-10T05:00:00Z",
        "end_time": "2021-07-10T06:00:00Z",
        "value": 60
      },
      {
        "start_time": "2021-07-10T06:00:00Z",
        "end_time": "2021-07-10T07:00:00Z",
        "value": 33
      },
      {
        "start_time": "2021-07-10T07:00:00Z",
        "end_time": "2021-07-10T08:00:00Z",
        "value": 127
      },
      {
        "start_time": "2021-07-10T08:00:00Z",
        "end_time": "2021-07-10T09:00:00Z",
        "value": 200
      },
      {
        "start_time": "2021-07-10T09:00:00Z",
        "end_time": "2021-07-10T10:00:00Z",
        "value": 50
      },
      {
        "start_time": "2021-07-10T10:00:00Z",
        "end_time": "2021-07-10T11:00:00Z",
        "value": 60
      },
      {
        "start_time": "2021-07-10T11:00:00Z",
        "end_time": "2021-07-10T12:00:00Z",
        "value": 70
      },
      {
        "start_time": "2021-07-10T12:00:00Z",
        "end_time": "2021-07-10T13:00:00Z",
        "value": 80
      },
      {
        "start_time": "2021-07-10T13:00:00Z",
        "end_time": "2021-07-10T14:00:00Z",
        "value": 90
      },
      {
        "start_time": "2021-07-10T14:00:00Z",
        "end_time": "2021-07-10T15:00:00Z",
        "value": 100
      },
      {
        "start_time": "2021-07-10T15:00:00Z",
        "end_time": "2021-07-10T16:00:00Z",
        "value": 22
      },
      {
        "start_time": "2021-07-10T16:00:00Z",
        "end_time": "2021-07-10T17:00:00Z",
        "value": 190
      },
      {
        "start_time": "2021-07-10T17:00:00Z",
        "end_time": "2021-07-10T18:00:00Z",
        "value": 37
      },
      {
        "start_time": "2021-07-10T18:00:00Z",
        "end_time": "2021-07-10T19:00:00Z",
        "value": 33
      },
      {
        "start_time": "2021-07-10T19:00:00Z",
        "end_time": "2021-07-10T20:00:00Z",
        "value": 150
      },
      {
        "start_time": "2021-07-10T20:00:00Z",
        "end_time": "2021-07-10T21:00:00Z",
        "value": 170
      },
      {
        "start_time": "2021-07-10T21:00:00Z",
        "end_time": "2021-07-10T22:00:00Z",
        "value": 130
      },
      {
        "start_time": "2021-07-10T22:00:00Z",
        "end_time": "2021-07-10T23:00:00Z",
        "value": 200
      },
      {
        "start_time": "2021-07-10T23:00:00Z",
        "end_time": "2021-07-10T24:00:00Z",
        "value": 55
      }
    ]
  },
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {
      "field": "start_time",
      "bin": {"binned": true},
      "scale": {"padding": "-8"},
      "type": "temporal",
      "title": "Time"
    },
    "x2": {"field": "end_time"},
    "y": {"field": "value", "type": "quantitative", "title": "Count"}
  }
}

Vega-Lite 分级折线图

Vega-Lite Binned Line Chart

vega-lite