使用 altair mark_image,是否可以缩放图像?

with altair mark_image, is it possible to zoom image?

我想使用 altair 来显示图像并使其具有交互性以进行缩放和平移。 这是一个不起作用的例子:

import altair as alt
import pandas as pd

im='data:image/png;base64,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'

source = pd.DataFrame.from_records([
      {"x": 0, "y": 0, "img": im}
])

alt.Chart(source).mark_image(
    width=50,
    height=50
).encode(
    x='x',
    y='y',
    url='img'
).interactive()

如果我不使用 x 和 y 编码(这是我优先显示图像的方式),.interactive() 会生成 Javascript Error: Expression parse error: ? {unit: "", fields: selector053_tuple_fields, values: []} : null This usually means there's a typo in your chart specification. See the javascript console for the full traceback. 尽管它在没有交互性的情况下工作。

当我在源数据框中将 x 和 y 设置为 1 时,平移有效,但缩放只是缩放轴,而不是图像。

不可以,在 Altair 中无法缩放图像标记。缩放从根本上与 x 和 y 位置比例相关联,图像标记的绘制方式与比例无关。

可以在 Altair 中使用密集热图显示单个图像像素来显示可缩放图像;有关信息,请参阅