使用Bokeh Slider滑动图像

问题描述

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

I am trying to convey a large amount of scientific data seamlessly with the help of sliders.

我从Bokeh开始，并且几乎没有javascript的知识。我试图设置第一种方法，能够滑过两张图像，但我无法刷新图像。

I am beginning with Bokeh and have close to no knowledge in javascript. I tried to setup a first approach to be able to slide through two images, but I cannot get the image to refresh.

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

Suppose I have 1.png and 2.png in my folder.

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)

我改编了 for the滑块和
处理散景图像。

I adapted examples from Bokeh Widget Doc for the slider andworking with images in bokeh.

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

My idea is that the slider, through the callbackimg snippet, will modify the source which contains the url, i.e the name of the image to load.I thought, for now, that a simple access to the string in the source, and a replacement through the current value of the slider (so it should jump from 1.png to 2.png as the slider goes from 1 to 2) should do the trick.

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

However, nothing is changing. I suspect I am doing something wrong in the Javascript snippet.

感谢您的任何反馈

编辑：我编辑根据@bigreddot的建议编码，但现在滑块在位置'2'滑动时只显示一个空图。
EDIT2：解决了这个问题，在我的答案中

I edited the code according to the suggestions of @bigreddot, but now the slider shows simply an empty figure when sliding in position '2'. Solved the issue, in my answer below

推荐答案

问题是：

url = data['url'][0]
url.replace("1","f")

replace 方法返回 new string（您立即丢弃），因此您实际上并未更改列数据源中的任何内容。你需要这样的东西：

The replace method returns a new string (which you immediately discard), so you are not actually changing anything in the column data source. You need something like:

old = data['url'][0]
data['url'] = old.replace("1","f")

这篇关于使用Bokeh Slider滑动图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！