Bokeh技术求助：选中DataTable行后Plot未更新问题排查

我之前折腾Bokeh的时候也碰到过一模一样的问题！DataTable选中行后Plot没反应，多半是选中事件的绑定或者数据源更新的逻辑出了问题。下面我把踩过的坑和解决方法给你梳理清楚：

核心原理 #

Bokeh的联动依赖数据源的事件监听：DataTable的选中状态存在其绑定的ColumnDataSource的selected属性里，我们需要监听这个属性的变化，然后提取选中行的数据更新Plot的数据源。

常见问题排查 & 解决方案 #

1. 确保DataTable允许选中 #

首先检查DataTable的selectable属性是否设为True（默认是True，但有时候会被误改）：

data_table = DataTable(source=main_source, columns=columns, selectable=True)

2. 正确绑定选中事件 #

根据你使用的场景（Bokeh Server 或 纯前端静态页面），选择对应的回调方式：

场景1：使用Bokeh Server（Python后端回调）

这是最常用的场景，适合需要处理复杂逻辑的情况：

from bokeh.io import curdoc
from bokeh.models import ColumnDataSource, DataTable, TableColumn
from bokeh.plotting import figure
from bokeh.layouts import column

# 1. 准备数据源
main_data = {
    'x': [1,2,3,4,5],
    'y': [2,4,6,8,10],
    'label': ['A','B','C','D','E']
}
main_source = ColumnDataSource(data=main_data)
# Plot的数据源初始为空
plot_source = ColumnDataSource(data={'x': [], 'y': []})

# 2. 创建DataTable
columns = [
    TableColumn(field='x', title='X值'),
    TableColumn(field='y', title='Y值'),
    TableColumn(field='label', title='标签')
]
data_table = DataTable(source=main_source, columns=columns, width=400, height=200)

# 3. 创建Plot
p = figure(width=400, height=300, title='选中行数据展示')
p.circle(x='x', y='y', source=plot_source, size=12, color='#e74c3c')

# 4. 定义选中回调函数
def update_plot_on_selection(attr, old, new):
    selected_indices = new['indices']
    if selected_indices:
        # 提取选中行的数据（支持多选）
        selected_x = [main_source.data['x'][idx] for idx in selected_indices]
        selected_y = [main_source.data['y'][idx] for idx in selected_indices]
        plot_source.data = {'x': selected_x, 'y': selected_y}
    else:
        # 无选中时清空Plot
        plot_source.data = {'x': [], 'y': []}

# 5. 绑定事件到main_source的selected.indices属性
main_source.selected.on_change('indices', update_plot_on_selection)

# 6. 布局并添加到文档
curdoc().add_root(column(data_table, p))

场景2：纯前端静态页面（CustomJS回调）

如果不需要后端逻辑，用CustomJS实现前端联动：

from bokeh.io import show
from bokeh.models import ColumnDataSource, DataTable, TableColumn, CustomJS
from bokeh.plotting import figure
from bokeh.layouts import column

main_data = {
    'x': [1,2,3,4,5],
    'y': [2,4,6,8,10],
    'label': ['A','B','C','D','E']
}
main_source = ColumnDataSource(data=main_data)
plot_source = ColumnDataSource(data={'x': [], 'y': []})

columns = [
    TableColumn(field='x', title='X值'),
    TableColumn(field='y', title='Y值'),
    TableColumn(field='label', title='标签')
]
data_table = DataTable(source=main_source, columns=columns, width=400, height=200)

p = figure(width=400, height=300, title='选中行数据展示')
p.circle(x='x', y='y', source=plot_source, size=12, color='#e74c3c')

# 编写CustomJS回调
callback = CustomJS(args=dict(main_src=main_source, plot_src=plot_source), code="""
    const selectedIndices = main_src.selected.indices;
    const newX = [];
    const newY = [];
    
    selectedIndices.forEach(idx => {
        newX.push(main_src.data['x'][idx]);
        newY.push(main_src.data['y'][idx]);
    });
    
    plot_src.data = {x: newX, y: newY};
    plot_src.change.emit(); // 必须触发这个方法通知Plot更新！
""")

# 绑定事件
main_source.selected.js_on_change('indices', callback)

show(column(data_table, p))

3. 容易踩的坑 #

• 前端回调必须调用change.emit()：纯前端场景下，更新plot_source.data后，必须手动调用plot_src.change.emit()，否则Plot不会感知到数据源变化。
• 不要监听DataTable本身的属性：很多人会尝试监听DataTable的selected属性，但实际上选中状态是存在其绑定的ColumnDataSource里的，要监听数据源的selected.indices。
• 处理空选中的情况：当用户取消选中所有行时，要清空Plot的数据源，避免残留旧数据。

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