使用散景滑块滑动图像

我试图在滑块的帮助下无缝地传达大量科学数据。

我从 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 小部件文档 http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-widgets对于滑块和处理散景图像 https://stackoverflow.com/questions/34646270/how-do-i-work-with-images-in-bokeh-python.

我的想法是，滑块通过回调图像片段，将修改包含 url 的源，即要加载的图像的名称。 我认为，现在，对源中的字符串进行简单访问，并通过滑块的当前值进行替换（因此当滑块从 1 变为 2 时，它应该从 1.png 跳转到 2.png）做这个伎俩。

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

感谢您的任何反馈

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

@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)