如何设置Vega-Lite 时间序列图表x 轴的最大值和最小值？

Question

我正在使用 Vega-Lite 制作时间序列图表，我想设置 x 轴的最小值和最大值，而与显示的值无关。原因是我在单独的图表中并排显示多个时间序列，并且我希望它们的 x 轴对齐，即使某些序列比其他序列开始得早。

我发现 encoding.x.scale.domain, which seems like it's the right property to use. The documentation 说对于时间字段，这应该是时间戳的两个元素数组。但是，我将其设置为什么似乎无关紧要，我的图表不呈现任何线条，也不在 x 轴上呈现任何刻度，并且警告 Infinite extent for field "data": [Infinity, -Infinity]" 打印在控制台中。

更令人困惑的是，我已经能够通过以相同的方式设置 encoding.y.scale.domain 来控制 y 轴。

以下是我在 Vega 编辑器中试验过的图表规范的简化版本。我正在尝试将 x 轴设置为在比实际值更早的时间点开始并在更晚的时间点结束：

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
      {"ts": 1500400000000, "v": 1},
      {"ts": 1500500000000, "v": 2},
      {"ts": 1500600000000, "v": 3},
      {"ts": 1500700000000, "v": 2}
    ]
  },
  "width": 800,
  "height": 300,
  "mark": {"type": "line"},
  "encoding": {
    "x": {"field": "ts", "type": "temporal", "scale": {"domain": [1500000000000, 1500900000000]}},
    "y": {"field": "v", "type": "quantitative", "scale": {"domain": [0, 5]}}
  }
}

如果我删除 encoding.x.scale.domain 属性它会呈现一条线，但是当包含它时我无法找出任何不会导致警告的值。

这是设置 x 轴最小值和最大值的正确方法吗？为什么它适用于 y 轴而不适用于 x 轴？正确的做法是什么？

Answer 1

您尝试的是在 Vega-Lite 中指定时域的正确方法，但在 Vega-Lite 4.5 中引入了此行为中的错误。这是您使用 Vega-Lite 4.4 的规范结果：

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega@5"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-lite@4.4"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm//vega-embed@6"></script>
</head>
<body>
  <div id="vis"></div>
  <script>
      var spec = {
        "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
        "data": {
          "values": [
            {"ts": 1500400000000, "v": 1},
            {"ts": 1500500000000, "v": 2},
            {"ts": 1500600000000, "v": 3},
            {"ts": 1500700000000, "v": 2}
          ]
        },
        "width": 800,
        "height": 300,
        "mark": {"type": "line"},
        "encoding": {
          "x": {"field": "ts", "type": "temporal", "scale": {"domain": [1500000000000, 1500900000000]}},
          "y": {"field": "v", "type": "quantitative", "scale": {"domain": [0, 5]}}
        }
      };
      vegaEmbed("#vis", spec);
  </script>
</body>
</html>

我已在 https://github.com/vega/vega-lite/issues/6060

提交错误报告

如何设置Vega-Lite 时间序列图表x 轴的最大值和最小值？

How do I set the max and min of the x-axis of Vega-Lite time series chart?

vega-lite