我正在使用Vega-Lite制作时间序列图,并且希望设置x轴的最小值和最大值,而与显示的值无关。原因是我要在单独的图表中并排显示多个时间序列,并且我希望它们的x轴对齐,即使某些序列比其他序列更早开始。
我发现encoding.x.scale.domain
,似乎是要使用的正确属性。该文档说,对于时间字段,这应该是时间戳的两个元素的数组。但是,设置它似乎无关紧要,我的图表没有绘制任何线条,也没有在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轴?什么是正确的方法?
您尝试的是在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>
谢谢。这个问题也已经得到解决,太好了。