使用散景的交互式滑块

时间:2016-07-20 16:36:47

标签: javascript python jupyter-notebook bokeh

我尝试使用散景互动滑块来修改绘图的内容,类似示例here。我有两个嵌套列表xy

我只想让滑块更改要绘制的列表的索引。即如果滑块索引= 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)

1 个答案:

答案 0 :(得分:4)

您可以定义两个ColumnDataSource s: source_visible 和<而不是让滑块更改要绘制的数据的索引strong> source_available ,其中第一个保存当前正在绘图中显示的数据,第二个充当数据存储库,我们可以在其中对数据进行采样{ {1}}基于网页上用户选择的回调:

CustomJS

请注意,如果您的数据很大,可能需要一段时间才能将其全部发送到客户端的浏览器。