보케트 플롯의 여러 슬라이더

Question

나는 bokeh 슬라이더를 사용하여 여러 개의 원을 그려 봅니다. 페이지에 예제가 있다는 것을 알고 있습니다. 그러나 그래픽을 구현하려고 할 때 슬라이더가 나타나지만 그래픽이 업데이트되지 않습니다. 콜백 문제입니다.

여기 일 아닌가요 내 코드 :

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(); 
""")