每次我在前端放大/缩小时，如何以编程方式检查 Altair 图表的放大/缩小功能

Posted 2023-03-29

【中文标题】每次我在前端放大/缩小时，如何以编程方式检查 Altair 图表的放大/缩小功能

【英文标题】：How to check Altair chart 's Zoom in/out functionality in a programatic way each time when i Zoom in/out in the front end

【发布时间】：2021-10-05 06:52:27

【问题描述】：

我编写了一个流线型代码，我使用 altair 在前端显示图表。使该图表具有放大/缩小功能。我使用“.interactive()”来完成这项工作，如下所示。

chart = alt.Chart(embd_1).mark_circle(size=30).encode(
    x = 'dimention1:Q', 
    y = 'dimention2:Q',
    tooltip=['col1'] ,
    color=color).properties(width=600,height=600).add_selection(selected).interactive()

但是，当我在我的应用中放大/缩小时，我遇到了一个问题。需要很多时间来更新。一旦我开始滚动鼠标，更新前端的缩放图表实际上需要 10 多秒。

我只是想知道这可能是因为 streamlit 正在运行 altairs 代码下方的所有代码，因为当我使用放大/缩小功能时，我不知道如何跳过或避免某些代码。

那么，问题是如何以编程方式定义用户是否放大/缩小？

如下：

if CheckZoom_SomeThingIDnotKnowYet == True:
   logic to execute code1
else:
   logic to execute code2

有关使用的数据和 Altair 代码的其他信息：

def altair_graph(embd_1):
    selected = alt.selection_single(on="click", empty="none")
    dom = ['Other IPs', 'Slected IP','Sel Dims']
    rng_clr = ['lightgrey', 'red','blue']

    color_point=alt.Color('color', scale=alt.Scale(domain=dom, range=rng_clr))

    color = alt.condition(selected, alt.value('red'), color_point,legend=None)

    chart = alt.Chart(embd_1).mark_circle(size=30).encode(
        x = 'dimention1:Q', 
        y = 'dimention2:Q',
        tooltip=['dimention1','dimention2'] ,
        color=color
    ).properties(width=600,height=600).add_selection(selected).interactive()

    return chart

上述函数的示例可以如下创建：

dimention1=np.random.rand(1,100000).squeeze()
dimention2=np.random.rand(1,100000).squeeze()
colr_values = ['Other Ids', 'Slected Id','Sel Dims']
color = np.random.choice(colr_values, 100000, p=[0.9, 0.05, 0.05])
sample = pd.DataFrame('dimention1':dimention1,'dimention2':dimention2,'color':color)

altair_graph(sample)

如示例所示，我的实时数据超过 150k 个数据点。

即使我在 streamlit 之外执行了上述代码，放大/缩小也需要大量时间。有人可以提供解决此问题的方法吗？

【问题讨论】：

您能否提供一个包含数据和代码的可重现示例？您可以尝试在 streamlit 之外运行 Altair 图表，以了解它是否与 streamlit 或 Altair（可能是后者）有关。

@joelostblom - 我已经添加了我在上述描述中使用的示例数据和代码。而且，是的，在流光之外也需要更长的时间。

【参考方案1】：

Altair/VegaLite 在有这么多数据点的情况下表现不佳（我认为它在某处会减慢 20-40k 左右）。您可以尝试alt.data_transformers.enable('data_server') 进行潜在的小改进，并在此处查看我的答案以获取更多详细信息并在 cmets https://***.com/a/67349827/2166823 中进行讨论。