javascript - 使用散景滑块小部件更新绘图数据
问题描述
当小部件触发回调时,我有一个关于如何在 Bokeh 中使用 CustomJS 脚本更新数据的一般性问题。
以下代码对我来说很好
import numpy as np
from bokeh.layouts import column, row
from bokeh.models import CustomJS, Slider
from bokeh.plotting import ColumnDataSource, figure, output_file, output_notebook, show
output_notebook()
# Define a slider
my_slider = Slider(start=0, end=2, value=0, step=1, title="Amplitude")
# Produce a list of data to be scrolled with the slider
xy_list = []
for a in range(0,3):
x_list = np.linspace(0, 10, 500)
y_list = float(a) * np.sin(x_list)
xy_list.append(
ColumnDataSource(data=dict(x=x_list, y=y_list))
)
# Produce the initial data to be displayed
# NOTE: this is like a hard-coded deepcopy,
# since deepcopy doesn't seem to work well
# with Bokeh objects
xy_current = ColumnDataSource(
data=dict(
x=np.linspace(0, 10, 500),
y=0.0*np.linspace(0, 10, 500)
)
)
# Produce a plot
plot = figure(y_range=(-10, 10), plot_width=200, plot_height=200)
plot.line('x', 'y', source=xy_current, line_width=3, line_alpha=0.6)
# Define a callback for the slider
callback = CustomJS(
args=dict(
# source_0=xy_source_0, # An instance of ColumnDataSource
source_curr=xy_current, # An instance of ColumnDataSource
source_list=xy_list, # A list, with entries of type ColumnDataSource
),
code="""
var data_curr = source_curr.data; // This is an instance of bokeh.core.property.wrappers.PropertyValueColumnData
var plot_i = cb_obj.value // This is an int
var old_x = data_curr['x'] // This is a numpy.ndarray
var old_y = data_curr['y'] // This is a numpy.ndarray
var new_x = source_list[plot_i].data['x'] // This is a numpy.ndarray
var new_y = source_list[plot_i].data['y'] // This is a numpy.ndarray
// Now update the y-values for each x, based on the slider value
for (var i = 0; i < old_x.length; i++) {
old_x[i] = new_x[i];
old_y[i] = new_y[i];
}
source_curr.change.emit();
""")
# Implement the callback
my_slider.js_on_change('value', callback)
# Show
layout = row(
plot,
my_slider,
)
show(layout)
但是,如果可以替换它会更有用(对于与此代码无关的更大项目)
for (var i = 0; i < old_x.length; i++) {
old_x[i] = new_x[i];
old_y[i] = new_y[i];
}
通过这样的事情
old_x = new_x
old_y = new_y
我试过这样做,但数据没有更新。有人可以解释为什么,以及如何实现这种更高层次的数据变化(即不必逐个更改列表的值)?
编辑:在 bigreddot 的回答之后,我将回调脚本更新为以下形式,它使用较少的 ocal 变量。
callback = CustomJS(
args=dict(
source_curr=xy_current, # An instance of ColumnDataSource
source_list=xy_list, # A list, with entries of type ColumnDataSource
),
code="""
var plot_i = cb_obj.value // This is an int
// Now update the y-values for each x, based on the slider value
source_curr.data['x'] = source_list[plot_i].data['x']
source_curr.data['y'] = source_list[plot_i].data['y']
source_curr.change.emit();
""")
解决方案
首先,纠正一个误解:
var old_x = data_curr['x'] // This is a numpy.ndarray
这是在不存在 NumPy 的浏览器中执行的 JavaScript,因此它要么是 JS 类型数组,要么是普通 JS 数组,但绝对不是numpy.ndarray
.
您必须实际更新source中的值。当你这样做时:
var old_x = data_curr['x']
您创建一个新的局部变量。如果你这样做:
old_x = new_x
然后您所做的就是为局部变量分配一个新值。这根本不影响数据源。
相反,您需要类似的东西:
source_curr.data['x'] = new_x
这实际上修改了数据源的内容。
推荐阅读
- javascript - Three.js 上的对象拖动(mousemove+mousedown)与墙壁碰撞应该阻止对象进一步拖动
- odoo - 在odoo 12中将一个字段的数据显示到另一个字段中
- php - PHP mb_ereg_replace 不替换 UTF-8 字符
- spring-cloud - 用于 SSL 的 Spring Cloud Stream Binder Solace 配置
- python - 如果是奇数则返回数字的平方,如果是偶数则返回 (number-1) 平方
- asp.net-core - 在运行时应用迁移有什么缺点?
- mongodb - MongoDB查询优化或提高性能
- julia - 错误:MethodError:没有方法匹配 abs(::Array{Complex{Float64},1})
- json - Delphi 7:处理从网站读取的 JSON 响应中的 utf-8 数据
- r - 在shinyapps.io 上部署闪亮的应用程序时出错