javascript - 使用 Bokeh Slider 在图像中滑动

Question

我试图借助 slider 无缝地传达大量科学数据。

我刚开始使用 Bokeh，对 JavaScript 几乎一无所知。我尝试设置第一种方法来滑动两张图片，但我无法刷新图片。

假设我的文件夹中有 1.png 和 2.png。

from bokeh.io import vform
from bokeh.models import CustomJS, ColumnDataSource, Slider
from bokeh.plotting import Figure, output_file, show

output_file('image.html')

source = ColumnDataSource(data=dict(url=['1.png']))

p = Figure(x_range=(0,1), y_range=(0,1))

callbackimg = CustomJS(args=dict(source=source), code="""
    var data = source.get('data');
    var f = cb_obj.get('value')
    old = data['url'][0]
    data['url'][0]= old.replace("1","f")
    source.trigger('change');
""")

p.image_url('url',source=source, x=0, y=1,w=1,h=1)
slider = Slider(start=1, end=2, value=1, step=1, title="image number",     callback=callbackimg)

layout = vform(slider, p)
show(layout)

我改编了 Bokeh Widget Doc 中的示例对于 slider 和 working with images in bokeh .

我的想法是， slider 通过 callbackimg 片段修改包含 url 的源，即要加载的图像的名称。我想，现在，简单地访问源中的字符串，并通过 slider 的当前值进行替换(因此当 slider 从 1 跳到 2 时，它应该从 1.png 跳到 2.png)应该做这个把戏。

然而，一切都没有改变。我怀疑我在 Javascript 片段中做错了什么。

感谢任何反馈

编辑:我根据@bigreddot 的建议编辑了代码，但现在 slider 在位置“2”滑动时只显示一个空图形。EDIT2:解决了这个问题，在我下面的回答中

Answer 1

@bigreddot 答案是正确的，但是 var f 是一个数字，所以在替换中，我需要写 f.toString(10)。执行我想要的代码:

from bokeh.io import vform
from bokeh.models import CustomJS, ColumnDataSource, Slider
from bokeh.plotting import Figure, output_file, show

output_file('image.html')

source = ColumnDataSource(data=dict(url=['1.png']))

p = Figure(x_range=(0,1), y_range=(0,1))

callbackimg = CustomJS(args=dict(source=source), code="""
    var data = source.get('data');
    var f = cb_obj.get('value')
    old = data['url'][0]
    data['url'][0]= old.replace("1",f.toString(10))
    source.trigger('change');
""")

p.image_url('url',source=source, x=0, y=1,w=1,h=1)
slider = Slider(start=1, end=2, value=1, step=1, title="image number",     callback=callbackimg)

layout = vform(slider, p)
show(layout)