ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

javascript-使用Bokeh Slider滑动图像

2019-11-18 18:36:52  阅读:348  来源: 互联网

标签:interactive slider bokeh javascript python


我正在尝试借助滑块无缝地传达大量科学数据.

我从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的滑块示例
working with images in bokeh.

我的想法是,滑块,通过callbackimg片段,将修改其中包含的URL,即图像负载的名称来源.
我认为,到目前为止,应该简单地访问源中的字符串,并通过滑块的当前值进行替换(因此当滑块从1变为2时,它应该从1.png跳到2.png).做到这一点.

但是,没有任何变化.我怀疑我在Javascript代码段中做错了什么.

感谢您的任何反馈

编辑:我根据@bigreddot的建议编辑的代码,但现在的滑块示出简单地在位置“2”滑动时的空的数字.
EDIT2:解决了这个问题,在下面的回答中

解决方法:

问题是这样的:

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

replace方法将返回一个新字符串(您将立即将其丢弃),因此实际上并没有更改列数据源中的任何内容.您需要类似:

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

标签:interactive,slider,bokeh,javascript,python
来源: https://codeday.me/bug/20191118/2030297.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有