交互式更改 Altair 标记文本：背景颜色的可能性？

Question

作为一个更大的合成图的一部分，我有一个显示图像的图表，它伴随着一个 mark_text 图表，它把图像的标题放在它的一边。它是交互式的，单击图像会将其交换为另一个图像并更改文本。

图像和文本都只是放置在之前的内容之上。对于在我的情况下没有问题的图像，但文本看起来很丑并且无法阅读。

所以我想在切换显示的内容时“刷新”显示或为文本添加背景颜色（例如白色），以便下面的旧文本不再可见。

这是一个类似于我的设置的随机图像示例

import altair as alt
import pandas as pd

image_df = pd.DataFrame({'textfield': 'Here is a title   ','image_1': 'https://heise.cloudimg.io/width/610/q85.png-lossy-85.webp-lossy-85.foil1/_www-heise-de_/imgs/18/2/8/5/7/2/2/9/1-PIA23764-RoverNamePlateonMars-08be0e819a018e5e.png', 'IMAGE_2': 'https://nerdist.com/wp-content/uploads/2021/01/Perseverance-landing-body-image-1.png'}, index=[0])

imageSelector = alt.selection_single(fields=['key'], init={'key': 'image_1'}) 

Img = alt.Chart(image_df).transform_fold(
    ['image_1', 'IMAGE_2']
).mark_image(
    width=400,
    height=300
).encode(
    url = 'value:N'
).add_selection(
    imageSelector
).transform_filter(
    imageSelector
)

ImageTitle = alt.Chart(image_df).transform_fold(
    ['image_1', 'IMAGE_2']
).mark_text(
    dy=-220,
    angle=270,
    size=12
).encode(
    text='label:N'
).transform_calculate(
    label='datum.textfield + "(" + datum.key + ")"'
).transform_filter(
    imageSelector
)

fullImg = Img + ImageTitle
fullImg

要切换图像，目前需要交替进行双击（即重置选择）和单击（设置选择），这也不是最佳体验，但目前有效。任何有关如何改进的提示也值得赞赏。只是，我不想在图像外添加可点击的选择器，如单选按钮，点击更改操作应该发生在图像图表内。

为了使文本可读，我尝试将 .configure(background='white') 添加到文本图表（如此处所述：Add background solid fill to Altair graph），但这是不可能的，因为它是分层图表的一部分。

Answer 1

我认为没有办法通过类似 CSS 的属性突出显示文本的背景，我能想到的解决方法在这种情况下不适用。例如，我尝试在其后面添加一个矩形标记，但双击不起作用。原因是双击技术上不会在图像之间切换，它会重置为默认视图，即所有内容都在彼此之上（如果您在选择器中设置 empty='none'，您将看到双击会清除图片）。

要在图像之间实际切换，您需要单击图像来显示和隐藏它，例如，由于您的图像大小略有不同，您可以先双击以显示两者，然后单击底部不重叠的小条隐藏其中一个图像，然后单击图像的其余部分隐藏另一个。因此，如果您只有两个图像并且它们的大小略有不同，则可以使用这种方法。您可以通过在选择器中设置 nearest=True 来禁用此功能，这使您始终选择最近的图像，而不是在您错过点击时取消选择和图像（我相信现在会发生这种情况）

如果您改变主意使用小部件，在图像之间切换的最直观方法是添加例如通过将选择代码更改为图像下方的下拉列表：

imageSelector = alt.selection_single(
    fields=['key'], init={'key': 'image_1'},
    bind=alt.binding_select(options=['image_1', 'IMAGE_2']))