javascript - 链接到选择小部件的 Bokeh 数据表

Question

我正在尝试使用 customJS 回调创建一个链接到选择小部件的 Bokeh 数据表。这个想法是，当我更改选择时，数据表将更新以仅显示与所选选择值对应的相关行。我的代码如下:

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Select, DataTable, TableColumn
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models import CustomJS


output_file("CatDog.html")




select = Select(title="Animal", options=["Cat","Dog"])

source=ColumnDataSource(data=dict(Animal=["Cat","Cat","Cat","Cat","Dog","Dog","Dog","Dog",],Breed=["Siamese","Persian","Bengal","Burmese","Lab","Golden", "Poodle","Pug"]))

filteredSource = ColumnDataSource(data=dict(Animal=[],Breed=[]))

columns = [TableColumn(field="Animal",title="Animal"),TableColumn(field="Breed",title="Breed",sortable=True)]

callback = CustomJS(args=dict(source=source,filteredSource = filteredSource), code="""
var data = source.data;
var f = cb_obj.value;
var d2 = filteredSource.data;
d2['Animal']=[]
d2['Breed']=[]


for(i = 0; i < data['Animal'].length;i++){

if(data['Animal'][i]==f){

    d2['Animal'].push(data['Animal'][i])
    d2['Breed'].push(data['Breed'][i])
}

}

alert(d2['Breed'])
filteredSource.change.emit()

""")

select.js_on_change('value',callback)

data_table=DataTable(source=filteredSource,columns=columns )
data_table_unfiltered=DataTable(source=source,columns=columns )
show(widgetbox(data_table,select,data_table_unfiltered))

警报正确显示了我期望的行，具体取决于选择的类别，但“filteredSource”DataTable 没有更新，它保持空白。任何指导将不胜感激!

Answer 1

似乎要实现这一点，您需要触发数据表本身的更改。这个问题实际上已经在这里问过:Bokeh DataTable won't update after trigger('change') without clicking on header

尽管如此，将您的代码稍微重新排列到下面可以解决问题(使用 bokeh 0.12.14)

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import Select, DataTable, TableColumn
from bokeh.models.sources import ColumnDataSource, CDSView
from bokeh.models import CustomJS


output_file("CatDog.html")

select = Select(title="Animal", options=["Cat","Dog"])

source=ColumnDataSource(data=dict(Animal=["Cat","Cat","Cat","Cat","Dog","Dog","Dog","Dog",],Breed=["Siamese","Persian","Bengal","Burmese","Lab","Golden", "Poodle","Pug"]))

filteredSource = ColumnDataSource(data=dict(Animal=[],Breed=[]))

columns = [TableColumn(field="Animal",title="Animal"),
           TableColumn(field="Breed",title="Breed",sortable=True)]


data_table=DataTable(source=filteredSource,columns=columns, width=800 )
data_table_unfiltered=DataTable(source=source,columns=columns, width=800 )

callback = CustomJS(args=dict(source=source,
                              filteredSource=filteredSource,
                              data_table=data_table), code="""
var data = source.data;
var f = cb_obj.value;
var d2 = filteredSource.data;
d2['Animal']=[]
d2['Breed']=[]


for(i = 0; i < data['Animal'].length;i++){

if(data['Animal'][i]==f){

    d2['Animal'].push(data['Animal'][i])
    d2['Breed'].push(data['Breed'][i])
}

}

filteredSource.change.emit()
// trigger change on datatable
data_table.change.emit()

""")
select.js_on_change('value',callback)
show(widgetbox(data_table,select,data_table_unfiltered))