在Bokeh图中使用按钮迭代到某个值

Question

以下代码创建以下图表

from bokeh.plotting import figure
from bokeh.io import show, output_notebook
from bokeh.models import Button, CustomJS
from bokeh.layouts import row
from random import random

p = figure(x_range=(0, 10))
p.line(list(range(1000)), [random() for _ in range(1000)])

b = Button(label='Show next 10', callback=CustomJS(args=dict(xr=p.x_range), 
code="""
 xr.start = xr.end;
 xr.end = xr.end + 10;
"""))

不是在图表上显示下一个10，而是如何让它显示y轴的下一个值'0.5'与当前位置相比

Answer 1

我将random替换为choice，因为在随机浮点值数组中查找特定值几乎总是不返回任何内容。

此代码以这种方式滚动当前视口，以便下一个合适的值恰好位于中间。如果没有这样的值，按下按钮将无法执行任何操作。

请注意，所有关于“下一个值”的讨论都暗示x轴的数据在任何步骤都不会减少。

from bokeh.plotting import figure
from bokeh.models import Button, CustomJS, ColumnDataSource
from random import choice

p = figure(x_range=(0, 10))
ds = ColumnDataSource(data=dict(x=list(range(1000)),
                                y=[choice([1, 2, 3, 4, 5]) for _ in range(1000)]))
p.line(x='x', y='y', source=ds)

TARGET_Y = 2

b = Button(label='Show next {}'.format(TARGET_Y),
           callback=CustomJS(args=dict(ds=ds, xr=p.x_range),
                             code="""
    const half_span = (xr.end - xr.start) / 2;
    const mid = xr.start + half_span;
    const ys = ds.data['y'];
    const new_mid = ds.data['x'].find((x, idx) => x > mid && ys[idx] === %s);
    if (new_mid !== undefined) {
        xr.start = new_mid - half_span;
        xr.end = new_mid + half_span;
    }
""" % TARGET_Y))