我正在尝试借助滑块无缝地传达大量科学数据.
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)
我改编了 Bokeh Widget Doc 用于滑块和处理散景图像.
I adapted examples from Bokeh Widget Doc for the slider and working with images in bokeh.
我的想法是滑块,通过 callbackimg 片段,将修改包含 url 的源,即要加载的图像的名称.我认为,现在,对源中的字符串的简单访问,并通过滑块的当前值进行替换(因此当滑块从 1 变为 2 时,它应该从 1.png 跳到 2.png)应该做这个伎俩.
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"位置滑动时只显示一个空图.在我的回答中解决了这个问题
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 字符串(您会立即将其丢弃),因此您实际上并未更改列数据源中的任何内容.你需要这样的东西:
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 滑动图像的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!