如何定义Python Bokeh RangeSlaider.on_更改回调函数以更改绘图的IndexFilter？

Question

我正在尝试为RangeSloider实现一个python回调函数。滑块值应该告诉IndexFilter应该获取哪个索引进行显示

例如：如果RangeSloider.value为（3,25），则我的绘图应仅包含/查看索引为3到25的数据

from bokeh.io import output_file, show
from bokeh.models import ColumnDataSource, GMapOptions, CustomJS, CDSView, IndexFilter
from bokeh.plotting import gmap, ColumnDataSource, figure
from bokeh.layouts import column, row
from bokeh.models.widgets import RangeSlider 
import numpy as np

def slider_callback(attr, old, new):
        p.view = CDSView(source=source, filters=[IndexFilter(np.arange(new.value[0], new.value[1]))])
        v.view = CDSView(source=source, filters=[IndexFilter(np.arange(new.value[0], new.value[1]))])


# data set
lon = [[48.7886, 48.7887, 48.7888, 48.7889, 48.789], 
        [48.7876, 48.7877, 48.78878, 48.7879, 48.787], 
        [48.7866, 48.7867, 48.7868, 48.7869, 48.786],
        [48.7856, 48.7857, 48.7858, 48.7859, 48.785],
        [48.7846, 48.7847, 48.7848, 48.7849, 48.784]]
lat = [[8.92, 8.921, 8.922, 8.923, 8.924],
        [8.91, 8.911, 8.912, 8.913, 8.914],
        [8.90, 8.901, 8.902, 8.903, 8.904],
        [8.89, 8.891, 8.892, 8.893, 8.894],
        [8.88, 8.881, 8.882, 8.883, 8.884]]
time = [0, 1, 2, 3, 4, 5]
velocity = [23, 24, 25, 24, 20]
lenght_dataset = len(lon)


# define source and map
source = ColumnDataSource(data = {'x': lon, 'y': lat, 't': time, 'v': velocity})
view = CDSView(source=source, filters=[IndexFilter(np.arange(0, lenght_dataset))])

map_options = GMapOptions(lat=48.7886, lng=8.92, map_type="satellite", zoom=13)

p = gmap("MY_API_KEY", map_options, title="Trajectory Map")
v = figure(plot_width=400, plot_height=400, title="Velocity")


# plot lines on map
p.multi_line('y', 'x', view=view, source=source, line_width=1)
v.line('t', 'v', view=view, source=source, line_width=3)


# slider to limit plotted data
range_slider = RangeSlider(title="Data Range Slider: ", start=0, end=lenght_dataset, value=(0, lenght_dataset), step=1) 

range_slider.on_change('value', slider_callback)


# Layout to plot and output
layout = row(column(p, range_slider),
            column(v)
    )

output_file("diag_plot_bike_data.html")

show(layout)

Answer 1

一些注意事项：

• time比其他列长-您将收到一条警告。在下面的代码中，我刚刚删除了它的最后一个元素
• ^带有过滤器的{}通常不应用于连续的glyph，如线（v.line，尤其是-multi_line可以）。你会收到一个关于它的警告。但是如果IndexFilter中的索引始终是连续的，那么您应该可以。无论哪种方式，都可以使用段图示符来避免警告
• 在回调中，您试图在地物上设置视图-视图仅存在于glyph渲染器上
• 通常，您不希望重新创建视图，而是希望重新创建尽可能少的Bokeh模型。理想情况下，您只需更改过滤器的indices字段。但是Bokeh中缺少一些连接，因此必须设置视图的filters字段，如下所示
• ^Python回调的{}参数接收作为第一个参数传递给相应的on_change调用的属性的新值。在本例中，它将是一个元组，因此您应该使用new[0]而不是new.value[0]
• 因为您已经决定使用Python回调，所以不能再使用show和静态HTML文件-您必须使用curdoc().add_root和bokeh serve。UI需要Python代码在运行时的某个地方运行
• 当更改滑块值时，您会注意到multi_line的独立段将连接在一起-这是一个bug，我刚刚为它创建了https://github.com/bokeh/bokeh/issues/10589

下面是一个工作示例：

from bokeh.io import curdoc
from bokeh.layouts import column, row
from bokeh.models import GMapOptions, CDSView, IndexFilter
from bokeh.models.widgets import RangeSlider
from bokeh.plotting import gmap, ColumnDataSource, figure

lon = [[48.7886, 48.7887, 48.7888, 48.7889, 48.789],
       [48.7876, 48.7877, 48.78878, 48.7879, 48.787],
       [48.7866, 48.7867, 48.7868, 48.7869, 48.786],
       [48.7856, 48.7857, 48.7858, 48.7859, 48.785],
       [48.7846, 48.7847, 48.7848, 48.7849, 48.784]]
lat = [[8.92, 8.921, 8.922, 8.923, 8.924],
       [8.91, 8.911, 8.912, 8.913, 8.914],
       [8.90, 8.901, 8.902, 8.903, 8.904],
       [8.89, 8.891, 8.892, 8.893, 8.894],
       [8.88, 8.881, 8.882, 8.883, 8.884]]
time = [0, 1, 2, 3, 4]
velocity = [23, 24, 25, 24, 20]
lenght_dataset = len(lon)

# define source and map
source = ColumnDataSource(data={'x': lon, 'y': lat, 't': time, 'v': velocity})
view = CDSView(source=source, filters=[IndexFilter(list(range(lenght_dataset)))])

map_options = GMapOptions(lat=48.7886, lng=8.92, map_type="satellite", zoom=13)

p = gmap("API_KEY", map_options, title="Trajectory Map")
v = figure(plot_width=400, plot_height=400, title="Velocity")

p.multi_line('y', 'x', view=view, source=source, line_width=1)
v.line('t', 'v', view=view, source=source, line_width=3)

range_slider = RangeSlider(title="Data Range Slider: ", start=0, end=lenght_dataset, value=(0, lenght_dataset), step=1)


def slider_callback(attr, old, new):
    view.filters = [IndexFilter(list(range(*new)))]


range_slider.on_change('value', slider_callback)

layout = row(column(p, range_slider), column(v))
curdoc().add_root(layout)