Voilà部署的散点图小部件拖动滑块触发非预期整页刷新问题

问题原因 #

你当前的代码每次触发滑块交互时，都会在回调函数scatter_plot里重新生成整个Figure实例、重新执行plt.show()输出新图表，Voilà在检测到页面内有新的顶层组件输出时就会触发整页重载，无法做局部增量更新。

修正方案 #

提前初始化图表和散点图层，交互回调仅更新散点的坐标数据即可，修改后的代码如下：

from bqplot import pyplot as plt
import numpy as np
import ipywidgets as widgets

# 提前初始化图表和散点图层，全局仅创建一次
fig = plt.figure()
init_x = np.random.uniform(-1,1,10)
init_y = np.random.uniform(-1,1,10)
scatter = plt.scatter(init_x, init_y, default_size=10)
plt.show()

def update_scatter(n):
    # 仅更新散点的坐标属性，不生成新的图表实例
    scatter.x = np.random.uniform(-1,1,n)
    scatter.y = np.random.uniform(-1,1,n)

slider = widgets.IntSlider(min=0, max=1000, value=10)
widgets.interact(update_scatter, n=slider)

修改说明 #

• 把Figure、散点实例的创建移到了交互回调外部，避免重复生成新的图表对象
• 回调函数仅修改散点实例的x和y属性，依靠bqplot的响应式特性自动更新视图
• 移除了回调内的plt.show()调用，避免触发Voilà的页面重渲染逻辑
  修改后部署Voilà，调整滑块只会局部更新散点数据，不会触发整页刷新。

内容的提问来源于stack exchange，提问作者Mark