散景,套索选择表格更新 [英] Bokeh, lasso select to table update
问题描述
我希望每个人都过得很好.
I hope everyone is doing well.
我正在尝试开发散景交互,从而选择散点图的一部分将更新表格.
I am trying to develop a Bokeh interaction whereby selecting a part of a scatter plot will update a table.
我正在使用Bokeh文档中的许多示例代码.我的工作场所运行的是较早版本的Bokeh(0.12.5),因此我不得不将自定义JS的最后一行(从s2.change.emit()更改为s2.trigger('change).然后,我添加了一些内容)行来创建数据表.
I am using a lot of the sample code from the Bokeh documentation. My workplace is running an older version of Bokeh (0.12.5) so I had to change the last line in the Custom JS (from s2.change.emit() to s2.trigger('change). I then added in a few lines to create a DataTable.
我天真地认为,由于在数据表中采购's1'有效,因此采购's2'将使我可以将表链接到套索选择.我什至尝试在JS回调的表小部件中添加一个额外的触发器.
I naively thought that since sourcing 's1' in the Datatable works, sourcing 's2' will allow me to link the table to the lasso select. I even tried adding in an extra trigger to the table widget in the JS callback.
有人知道如何从图形中的套索选择创建表格吗?
Does anyone know how to create a table from a lasso select in a graph?
代码
谢谢.
from random import random
from bokeh.layouts import row
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import figure, output_file, show
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
output_file("callback.html")
x = [random() for x in range(500)]
y = [random() for y in range(500)]
s1 = ColumnDataSource(data=dict(x=x, y=y))
p1 = figure(plot_width=400, plot_height=400, tools="lasso_select", title="Select Here")
p1.circle('x', 'y', source=s1, alpha=0.6)
s2 = ColumnDataSource(data=dict(x=[], y=[]))
p2 = figure(plot_width=400, plot_height=400, x_range=(0, 1), y_range=(0, 1),
tools="", title="Watch Here")
p2.circle('x', 'y', source=s2, alpha=0.6)
###New code##
columns = [TableColumn(field ="x", title = "X axis"),
TableColumn(field ="y", title = "Y axis")]
table = DataTable(source =s2, columns = columns, width =400, height = 280)
##Added in table.trigger('change') hoping this would link to the lasso select.
s1.callback = CustomJS(args=dict(s2=s2), code="""
var inds = cb_obj.selected['1d'].indices;
var d1 = cb_obj.data;
var d2 = s2.data;
d2['x'] = []
d2['y'] = []
for (i = 0; i < inds.length; i++) {
d2['x'].push(d1['x'][inds[i]])
d2['y'].push(d1['y'][inds[i]])
}
s2.trigger('change');
table.trigger('change');
""")
##having 'table' in the layout, stops the callback from working, deleting table from the layout makes it work.
layout = row(p1, p2, table)
show(layout)
推荐答案
这是bokeh 1.0.4的有效版本
Here's a working version for bokeh 1.0.4
from random import random
import bokeh.io
from bokeh.io import output_notebook, show
from bokeh.layouts import row
from bokeh.models import CustomJS, ColumnDataSource
from bokeh.plotting import figure
from bokeh.models.widgets import DataTable, DateFormatter, TableColumn
from bokeh.resources import INLINE
bokeh.io.output_notebook(INLINE)
x = [random() for x in range(500)]
y = [random() for y in range(500)]
s1 = ColumnDataSource(data=dict(x=x, y=y))
p1 = figure(plot_width=400, plot_height=400, tools="lasso_select", title="Select Here")
p1.circle('x', 'y', source=s1, alpha=0.6)
s2 = ColumnDataSource(data=dict(x=[], y=[]))
p2 = figure(plot_width=400, plot_height=400, x_range=(0, 1), y_range=(0, 1),
tools="", title="Watch Here")
p2.circle('x', 'y', source=s2, alpha=0.6)
columns = [TableColumn(field ="x", title = "X axis"),
TableColumn(field ="y", title = "Y axis")]
table = DataTable(source =s2, columns = columns, width =155, height = 380)
s1.selected.js_on_change('indices', CustomJS(args=dict(s1=s1, s2=s2, table=table), code="""
var inds = cb_obj.indices;
var d1 = s1.data;
var d2 = s2.data;
d2['x'] = []
d2['y'] = []
for (var i = 0; i < inds.length; i++) {
d2['x'].push(d1['x'][inds[i]])
d2['y'].push(d1['y'][inds[i]])
}
s2.change.emit();
table.change.emit();
""")
)
layout = row(p1, p2, table)
show(layout)
您甚至可以在表格中选择行/值,第二个绘图中的点将更改不透明度(您可以通过单击标题对表格进行排序)
You can even select rows/values in the table and the points in the second plot will change opacity (and you can sort the table by clicking the headers)
这篇关于散景,套索选择表格更新的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!