ボケプロットの複数のスライダ

Question

ボケスライダを使用して複数の円をプロットしようとしています。私はページに例があることを知っていますhttps://bokeh.pydata.org/en/latest/docs/gallery/slider.htmlしかし、私はそれを実装しようとすると、グラフィックスとスライダが表示されますが、グラフィックは更新されません。私はそれがコールバックの問題だと思います。

ここis't私のコード：

import numpy as np 
from bokeh.layouts import row, widgetbox 
from bokeh.models import CustomJS, Slider 
from bokeh.plotting import figure, output_file, show, ColumnDataSource 

L_1 = 150 
L_2 = 100 
w = 0 
h = 250 
r1 = L_1 + L_2 
r2 = L_1 - L_2 
t = np.linspace(0, 2 * np.pi, 200) 
sint = np.sin(t) 
cost = np.cos(t) 
x1 = r1 * cost 
y1 = r1 * sint 
x2 = r2 * cost 
y2 = r2 * sint 
x3 = r1 * cost + w 
y3 = r1 * sint + h 
x4 = r2 * cost + w 
y4 = r2 * sint + h 

source = ColumnDataSource(data=dict(x1=x1,y1=y1,x2=x2,y2=y2,x3=x3,y3=y3,x4=x4,y4=y4,t=t)) 

plot = figure(plot_width=400, plot_height=400) 

plot.line('x1', 'y1', source=source, line_width=3, line_alpha=0.6) 
plot.line('x2', 'y2', source=source, line_width=3, line_alpha=0.6) 
plot.line('x3', 'y3', source=source, line_width=3, line_alpha=0.6) 
plot.line('x4', 'y4', source=source, line_width=3, line_alpha=0.6) 

callback = CustomJS(args=dict(source=source), code=""" 
    var data = source.data; 
    var L_1 = l1.value; 
    var L_2 = l2.value; 
    var w = w.value; 
    var h = h.value; 
    var r1 = L_1 + L_2; 
    var r2 = L_1 - L_2; 
    t = data['t']; 
    for (i = 0; i < t.length; i++) { 
     sint = Math.sin(t[i]); 
     cost = Math.cos(t[i]); 
     y1[i] = r1 * sint; 
     x1[i] = r1 * cost; 
     y2[i] = r2 * sint; 
     x2[i] = r2 * cost; 
     y3[i] = r1 * sint + w; 
     x3[i] = r1 * cost + h; 
     y4[i] = r2 * sint + w; 
     x4[i] = r2 * cost + h; 
    } 
    source.change.emit(); 
""") 

L_1_slider = Slider(start=0, end=300, value=200, step=1, 
        title="L1", callback=callback) 
callback.args["l1"] = L_1_slider 

L_2_slider = Slider(start=0, end=300, value=150, step=1, 
        title="L2", callback=callback) 
callback.args["l2"] = L_2_slider 

w_slider = Slider(start=0, end=600, value=0, step=1, 
        title="w", callback=callback) 
callback.args["w"] = w_slider 

h_slider = Slider(start=0, end=600, value=0, step=.1, 
        title="h", callback=callback) 
callback.args["h"] = h_slider 

layout = row(
    plot, 
    widgetbox(L_1_slider, L_2_slider, w_slider, h_slider), 
) 

output_file("slider2.html", title="slider.py example") 

show(layout) 

Answer 1

あなたはそれがコールバックの問題ですが正しいです。現在の状態では、ブラウザコンソールを調べることができます。y1は未定義です。これは、コールバック内でy1（とy2など）という変数が定義されていないためです。ただし、列データソース内に格納されます。次のようにコールバックを更新することができます（または、forループに代入する前にすべての変数を定義する）。

callback = CustomJS(args=dict(source=source), code=""" 
    var data = source.data; 
    var L_1 = l1.value; 
    var L_2 = l2.value; 
    var w = w.value; 
    var h = h.value; 
    var r1 = L_1 + L_2; 
    var r2 = L_1 - L_2; 
    t = data['t']; 
    for (i = 0; i < t.length; i++) { 
     sint = Math.sin(t[i]); 
     cost = Math.cos(t[i]); 
     data.y1[i] = r1 * sint; 
     data.x1[i] = r1 * cost; 
     data.y2[i] = r2 * sint; 
     data.x2[i] = r2 * cost; 
     data.y3[i] = r1 * sint + w; 
     data.x3[i] = r1 * cost + h; 
     data.y4[i] = r2 * sint + w; 
     data.x4[i] = r2 * cost + h; 
    } 
    source.change.emit(); 
""")