使用 Bokeh 的交互式滑块

Question

我正在尝试使用散景交互式滑块来修改绘图的内容，类似于示例here。我有两个嵌套列表 x 和 y。

我只是想让滑块改变要绘制的列表的索引。即如果滑块索引= 0，则绘制x[0] vs y[0]，如果滑块索引为1，则绘制x[1] vs y[1]，等等...

文档示例动态计算新数据，这对于我需要处理的数据是不可行的。

当我运行下面的代码时，情节中什么都没有显示...我不懂 javascript，所以我猜这就是我出错的地方。

我正在运行 Python 3.5 和 Bokeh 0.12。这一切都在一个 jupyter-notebook 中运行。

import numpy as np
from bokeh.layouts import row
from bokeh.models import CustomJS, ColumnDataSource, Slider
from bokeh.plotting import Figure, show
from bokeh.io import output_notebook
from bokeh.resources import INLINE
output_notebook(INLINE)

x = [[x*0.05 for x in range(0, 500)],
     [x*0.05 for x in range(0, 500)]]

y = [np.sin(x[0]), 
     np.cos(x[1])]

source = ColumnDataSource(data=dict(x=x, y=y))

plot = Figure(plot_width=400, plot_height=400)
plot.line('x'[0], 'y'[0], source=source, line_width=3, line_alpha=0.6)

callback = CustomJS(args=dict(source=source), code="""
        var data = source.get('data');
        var f = cb_obj.get('value');
        x = data['x'][f];
        y = data['y'][f];
        source.trigger('change');
    """)

slider = Slider(start=0, end=1, value=0, step=1, title="index", callback=callback)
layout = row(plot, slider)
show(layout)

Answer 1

您可以定义两个 ColumnDataSources：source_visible 和 source_available 其中第一个保存当前显示在图中的数据，第二个充当数据存储库，我们可以在CustomJS回调中根据用户对数据进行采样网页上的选择：

import numpy as np
from bokeh.layouts import row
from bokeh.models import ColumnDataSource, Slider, CustomJS
from bokeh.plotting import Figure, show

# Define data
x = [x*0.05 for x in range(0, 500)]
trigonometric_functions = {
    '0': np.sin(x),
    '1': np.cos(x),
    '2': np.tan(x),
    '3': np.arctan(x)}
initial_function = '0'

# Wrap the data in two ColumnDataSources
source_visible = ColumnDataSource(data=dict(
    x=x, y=trigonometric_functions[initial_function]))
source_available = ColumnDataSource(data=trigonometric_functions)

# Define plot elements
plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source_visible, line_width=3, line_alpha=0.6)
slider = Slider(title='Trigonometric function',
                value=int(initial_function),
                start=np.min([int(i) for i in trigonometric_functions.keys()]),
                end=np.max([int(i) for i in trigonometric_functions.keys()]),
                step=1)

# Define CustomJS callback, which updates the plot based on selected function
# by updating the source_visible ColumnDataSource.
slider.callback = CustomJS(
    args=dict(source_visible=source_visible,
              source_available=source_available), code="""
        var selected_function = cb_obj.value;
        // Get the data from the data sources
        var data_visible = source_visible.data;
        var data_available = source_available.data;
        // Change y-axis data according to the selected value
        data_visible.y = data_available[selected_function];
        // Update the plot
        source_visible.change.emit();
    """)

layout = row(plot, slider)
show(layout)

请记住，如果您的数据很大，可能需要一段时间才能一次将所有数据发送到客户端的浏览器。