javascript - 使用 Bokeh 的交互式 slider

Question

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

我只是想让 slider 更改要绘制的列表的索引。即如果 slider 索引 = 0，则绘制 x[0] vs y[0]，如果 slider 索引为 1，则绘制 x[1] 与 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

您可以定义两个 ColumnDataSource:source_visible，而不是让 slider 更改要绘制的数据的索引 和 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)

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