如何为Bokeh回调过滤器的一部分编写Javascript代码，以便我可以按数字和类别进行过滤？

Question

我正在构建一个Bokeh可视化，并且一直在使用Javascript。我已经调整了一些JS代码以使用滑块，我还想通过复选框按类别另外过滤这些结果

我一直在尝试将我得到的（下面的简化版本）与我在the likes of this other stackoverflow post上找到的其他代码一起使用，但我不知道在第一个JS for循环之后如何扩展它。我会包括我一直在起草的东西，但坦率地说，这是一堆毫无意义的垃圾

from bokeh.models import Slider, CustomJSFilter, CDSView, ColumnDataSource, CustomJS
from bokeh.models.widgets import CheckboxGroup
from bokeh.layouts import column, layout

data = dict(Flights=[97, 34, 23, 6, 26, 97, 21, 92, 73, 10, 92, 14, 77, 4, 25, 48, 26, 39, 93],
            Not_Cancelled=[87, 63, 56, 38, 57, 63, 73, 56, 30, 23, 66, 47, 76, 15, 80, 78, 69, 87, 28],
            OnTime_Arrivals=[21, 65, 86, 39, 32, 62, 46, 51, 17, 79, 64, 43, 54, 50, 47, 63, 54, 84, 79],
            Category = ['A', 'B', 'B', 'C', 'A', 'C', 'B', 'C', 'C', 'B', 'A', 'A', 'B', 'B', 'A', 'C', 'C', 'C', 'C'])
source = ColumnDataSource(data=data)
Category_dict = dict(Cat = ['A','B','C'])
MinFlights = Slider(start=0, value=50, end=100, step=1)
MinFlights.js_on_change('value', CustomJS(args=dict(source=source), code="""
   source.change.emit()
"""))
checkbox_group = CheckboxGroup(labels= list(Category_dict["Cat"]), active = [1])
checkbox_group.js_on_change("active", CustomJS(code="source.change.emit();", args=dict(source=source)))

custom_filter = CustomJSFilter(args=dict(source=source, MinFlights=MinFlights), code='''
    var indices = [];
    for (var i = 0; i < source.get_length(); i++){
        if (source.data['Flights'][i] > MinFlights.value){
            indices.push(true);
        } else {
            indices.push(false);}}
    return indices;
''')
view = CDSView(source=source, filters=[custom_filter])

p = figure()
p.circle('OnTime_Arrivals', 'Not_Cancelled', source=source, view=view, size=20)

inputs = column(MinFlights, checkbox_group, width=200)
show(layout([[inputs,p]]))

有人能帮我吗？我所需要的只是一些代码来演示它是如何工作的，我可以修改其余的代码

Answer 1

我不是博克专家，但在我看来，你的问题可以通过使用“布尔过滤器”来解决

优点：您可以使用booleanFilter编写python代码，不必担心JS

例如，我想要这样的东西：

import pandas as pd, numpy as np
from bokeh.models import BooleanFilter,ColumnDataSource,CDSView

df=pd.DataFrame(data)
df["bools"]=np.where((df.Flights > 10)&(df.Category=="A"),True,False)
view = CDSView(source=ColumnDataSource(df), filters=[BooleanFilter(bools)])

Answer 2

实现它的一种方法是将checkbox_group=checkbox_group, categories=categories添加到CustomJSFilter回调中，以便它知道当前的类别选择。然后在indices上添加第二个过滤步骤，以最终返回回调中的selected数组（适用于Bokehv1.3.0）

from bokeh.models import Slider, CustomJSFilter, CDSView, ColumnDataSource, CustomJS, CheckboxGroup, Column, Row
from bokeh.plotting import figure, show

data = dict(Flights=[97, 34, 23, 6, 26, 97, 21, 92, 73, 10, 92, 14, 77, 4, 25, 48, 26, 39, 93],
            Not_Cancelled=[87, 63, 56, 38, 57, 63, 73, 56, 30, 23, 66, 47, 76, 15, 80, 78, 69, 87, 28],
            OnTime_Arrivals=[21, 65, 86, 39, 32, 62, 46, 51, 17, 79, 64, 43, 54, 50, 47, 63, 54, 84, 79],
            Category = ['A', 'B', 'B', 'C', 'A', 'C', 'B', 'C', 'C', 'B', 'A', 'A', 'B', 'B', 'A', 'C', 'C', 'C', 'C'])

source = ColumnDataSource(data=data)

categories = ['A','B','C']

MinFlights = Slider(start=0, value=50, end=100, step=1)
MinFlights.js_on_change('value', CustomJS(args=dict(source=source), code="""
   source.change.emit()
"""))

checkbox_group = CheckboxGroup(labels= categories, active = [0, 1, 2])
checkbox_group.js_on_change("active", CustomJS(code="source.change.emit();", args=dict(source=source)))

custom_filter = CustomJSFilter(args=dict(source=source, MinFlights=MinFlights, checkbox_group=checkbox_group, categories=categories), code='''
    var indices = [];
    for (var i = 0; i < source.get_length(); i++){
        if (source.data['Flights'][i] > MinFlights.value){
            indices.push(true);
        } else {
            indices.push(false);}}

    selected = []
    for (i in indices) {
        let selected_categories = checkbox_group.active.map((i) => categories[i])
        console.log(selected_categories)
        console.log(i, indices[i], source.data['Category'][i], selected_categories.includes(source.data['Category'][i]))
        if(indices[i] && selected_categories.includes(source.data['Category'][i])) {
            selected.push(true)
        }
        else {
            selected.push(false)
        }
    }
    return selected;
''')
view = CDSView(source=source, filters=[custom_filter])

p = figure()
p.circle('OnTime_Arrivals', 'Not_Cancelled', source=source, view=view, size=20)

inputs = Column(MinFlights, checkbox_group, width=200)
show(Row(inputs, p))