将 mark_line 分层到交互式线图上会显着降低 Altair 的性能

Question

这是我创建的一个虚拟数据集来说明我的问题：

import pandas as pd
import numpy as np
import altair as alt

# Use more rows than recommended so it's a bit easier to 
# see the slowdown with human eyes.
alt.data_transformers.disable_max_rows()

# Create N rows with 2 columns. 
N=10000
test_df = pd.DataFrame({'t' : range(0, N, 1), # Integers counting up from 0 to N - 1.
                        'A' : np.random.randint(0, 100, size=N)}) # random integer between 0 and 100.

我用它来创建线图：

test_line = alt.Chart(test_df).mark_line().encode(x='t:Q', y='A:Q').interactive(bind_y=False)

一切都很好，即使超过 5000 行，当我平移和缩放 时，呈现的交互式折线图也很活泼。这显然是机器相关的（即运行此代码在不同的机器上将导致在平移和缩放中的不同性能）。

继续前进，我试图画一条垂直线来标记一个兴趣点。该代码的灵感来自 this.

v_rule = alt.Chart(test_df).mark_rule(color='red').encode(x='a:Q').transform_calculate(a=str(5000))
alt.layer(test_line, v_rule).display()

有了这个，生成的交互式折线图在屏幕上用垂直线平移和缩放很慢：

如果我四处移动绘图使得垂直线不在屏幕上，平移和缩放再次变得活泼。

当我尝试将多个图连接在一起时，这个问题变得更糟，每个图也是交互式的并且有一条垂直线。

这条竖线有没有更好的画法？提前预渲染所有内容并保存到本地文件的某种方法？我很惊讶（也很困惑）一条线怎么会如此不利于渲染速度。

Answer 1

导致性能下降的不是垂直线，而是tranform_calculate。原因是正在为数据框中的每一行计算值，您可以看到，如果单击三点操作按钮“在 Vega 编辑器中打开图表”，单击右侧的 Data Viewer 和 select data_1。我相信这也是为什么图中的线看起来有点粗的原因，可能有 10000 条线在彼此之上。

要只创建一行，您可以这样做：

v_rule = alt.Chart(pd.DataFrame({'a': [5000]})).mark_rule(color='red').encode(x='a')
alt.layer(test_line, v_rule)

将 mark_line 分层到交互式线图上会显着降低 Altair 的性能

Layering mark_line onto an interactive line plot significantly decreases performance in Altair

python

pandas

altair