Vega Lite:有可能在折线图中使用图像作为标签吗

Question

我想用图像作为我的轴标签。我试着使用图像标记，但没有成功，这是意料之中的事。标签表达也是我尝试过的，但如果我想让它成为一个图像，那就不起作用了。我还能尝试什么，或者可能吗？

折线图示例

Answer 1

在另一个答案中使用相同的技术，可以通过额外的层添加图像轴：

{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"data": {
"values": [
{"x": 0.5, "y": 0.5, "img": "data/ffox.png"},
{"x": 1.5, "y": 1.5, "img": "data/gimp.png"},
{"x": 2.5, "y": 2.5, "img": "data/7zip.png"}
]
},
"layer": [{
"mark": {"type": "image", "width": 50, "height": 50},
"encoding": {
"x": {"field": "x", "type": "quantitative"},
"y": {"field": "y", "type": "quantitative"},
"url": {"field": "img", "type": "nominal"}
}
}, {
"transform": [{"calculate": "-.2", "as": "axis"}],
"mark": {"type": "image", "width": 25, "height": 25},
"encoding": {
"x": {"field": "x", "type": "quantitative", "axis":{"labelExpr": "", "title": null}},
"y": {"field": "axis", "type": "quantitative", "scale": {"domain": [0, 2.5]}},
"url": {"field": "img", "type": "nominal"}
}
}],
"resolve": {"scale": {"y": "shared"}}
}

Vega编辑器

=====2021-07-20=====

BarChart的x编码使用了分布不均匀的x字段，因此它未对齐。

如果编辑器中确实显示了a字段，最简单的方法是将编码替换为"x": {"field": "a", "type": "ordinal", "axis": null}

Vega编辑器

即使a字段不存在，您也可能需要添加这样一个字段来对齐甚至排序图像轴。

我能想到的最后一种方法是window变换，这是一种过度处理，但也没有增加额外的值：

Vega编辑器