Bokeh:使用CustomJS从checkboxgroup更新散点图以过滤源

Question

我对Java Script不是很熟悉，需要这个伟大社区的帮助！。

我正在尝试创建一个带有复选框组的散点图，以选择要绘制的不同组。伪数据如下：

from bokeh.models import CustomJS, ColumnDataSource, CheckboxGroup, Column
from bokeh.plotting import figure, show
import pandas as pd
data = dict(letter = ['A','A','B','C','B','B','A','C','C','B'], 
x = [1, 2, 1, 2, 3, 2, 2, 3, 2, 3], 
y = ['10','20','10','30','10','40','10','30','10','40'])
data = pd.DataFrame(data)
source = ColumnDataSource(data)
plot = figure()
plot.circle('x', 'y', line_width = 2, source = source)
show(plot)

我想添加一个复选框组，其中包含字母作为可能的选择，并仅绘制所选字母的值。如果能用Java脚本将其嵌入HTML文档中，那就太好了。

提前谢谢。

Answer 1

import pandas as pd
from bokeh.layouts import row
from bokeh.models import ColumnDataSource, CDSView, CheckboxGroup, CustomJS, BooleanFilter
from bokeh.plotting import figure, show
data = dict(letter=['A', 'A', 'B', 'C', 'B', 'B', 'A', 'C', 'C', 'B'],
x=[1, 2, 1, 2, 3, 2, 2, 3, 2, 3],
y=['10', '20', '10', '30', '10', '40', '10', '30', '10', '40'])
data = pd.DataFrame(data)
source = ColumnDataSource(data)
plot = figure()
active_letter = 'A'
f = BooleanFilter(booleans=[l == active_letter for l in data['letter']])
uniq_letters = sorted(set(data['letter']))
cg = CheckboxGroup(labels=uniq_letters, active=[uniq_letters.index(active_letter)])
cg.js_on_change('active',
CustomJS(args=dict(source=source, f=f),
code="""
const letters = cb_obj.active.map(idx => cb_obj.labels[idx]);
f.booleans = source.data.letter.map(l => letters.includes(l));
source.change.emit();
"""))
plot.circle('x', 'y', line_width=2, source=source,
view=CDSView(source=source, filters=[f]))
show(row(cg, plot))