Python bokehプロットでSpanとSliderを動的にリンクする

Question

私はビン内のデータを動的に可視化できるbokehを使ってPythonでプロットを作成しようとしています。私はPythonには比較的新しい、bokehにはまったく新しいことを知っておく価値があります。私はZERO javascriptを知っています。

Link a Span or Cursor in between plots with Bokeh in Python

と、この：

http://bokeh.pydata.org/en/latest/docs/user_guide/interaction/callbacks.html

が、トラブルそれぞれの必要な部品を実装したのです、私はこのことを相談してきました。ここに私のコードは、要求された機能を追加する前に、次のとおりです。

from bokeh.layouts import column, widgetbox 
from bokeh.models.widgets import Slider 
from bokeh.models import Span, CustomJS 

output_file('Raw_Spectra_and_Spillover_Data.html') 

# widgets for bin setup 
Pix1_LowLow = Slider(start = self.StartDAC, end = self.EndDAC, value = 129, step = 1, title = 'Pixel-1 - Low Bin - Low Thresh') 
Pix1_LowHigh = Slider(start = self.StartDAC, end = self.EndDAC, value = 204, step = 1, title = 'Pixel-1 - Low Bin - High Thresh') 
Pix1_HighLow = Slider(start = self.StartDAC, end = self.EndDAC, value = 218, step = 1, title = 'Pixel-1 - High Bin - Low Thresh') 
Pix1_HighHigh = Slider(start = self.StartDAC, end = self.EndDAC, value = 500, step = 1, title = 'Pixel-1 - High Bin - High Thresh') 

plot1spect = figure(width=700, height=250, title='pixel-1 Spectrum') 
plot1spect.line(self.SpectDACvals1[0], self.SpectrumData1[0], line_width=2) 
plot1spect_LowLowSpan = Span(location=Pix1_LowLow.value, dimension = 'height') 
plot1spect_LowHighSpan = Span(location=Pix1_LowHigh.value, dimension = 'height') 
plot1spect_HighLowSpan = Span(location=Pix1_HighLow.value, dimension = 'height') 
plot1spect_HighHighSpan = Span(location=Pix1_HighHigh.value, dimension = 'height') 
plot1spect.renderers.extend([plot1spect_LowLowSpan, plot1spect_LowHighSpan, plot1spect_HighLowSpan, plot1spect_HighHighSpan]) 

plot1spill = figure(width=700, height=250, title='pixel-1 Spillover') 
plot1spill.line(self.SpillDACvals1[0], self.SpillData1[0], line_width=2) 
plot1spill_LowLowSpan = Span(location=Pix1_LowLow.value, dimension = 'height') 
plot1spill_LowHighSpan = Span(location=Pix1_LowHigh.value, dimension = 'height') 
plot1spill_HighLowSpan = Span(location=Pix1_HighLow.value, dimension = 'height') 
plot1spill_HighHighSpan = Span(location=Pix1_HighHigh.value, dimension = 'height') 
plot1spill.renderers.extend([plot1spill_LowLowSpan, plot1spill_LowHighSpan, plot1spill_HighLowSpan, plot1spill_HighHighSpan]) 

show(row(plot1spect,plot1spill, widgetbox(Pix1_LowLow, Pix1_LowHigh, Pix1_HighLow, Pix1_HighHigh))) 

このコードは私にこれを与える：

誰かがPix1_LowLowスライダーが動的plot1spect_LowLowSpanの位置を制御するために取得する方法私を見ることができれば、私はこの技術を他のスライダーとスパンに拡張することができます。事前に多くの感謝！

python 3.5.2 - bokeh 12.0

Answer 1

これは最小限の完全な例です。以下に示すようにSpanなどの注釈を追加する推奨方法はplot.add_layoutであることに注意してください：答えを提供するための@bigreddotする

from bokeh.layouts import row, widgetbox 
from bokeh.models import Slider, Span, CustomJS 
from bokeh.plotting import figure, output_file, show 

slider = Slider(start=0, end=10, value=3, step=0.1, title='Slider') 

plot = figure(width=700, height=250, x_range=(0,10), y_range=(-1, 1)) 
span = Span(location=slider.value, dimension='height') 
plot.add_layout(span) 

slider.callback = CustomJS(args=dict(span=span, slider=slider), code=""" 
    span.location = slider.value 
""") 

output_file('span_slider.html') 

show(row(plot, widgetbox(slider))) 

Answer 2

感謝を。これは、うーむ...今、128個のデータファイルのためのプログラムでこれを行う方法を...特に私の解決策を実装したコード..ですここで

from bokeh.layouts import row, widgetbox 
    from bokeh.models import Span, CustomJS, Slider 

    output_file('Raw_Spectra_and_Spillover_Data.html') 

    # widgets for bin setup 
    Pix1_LowLow = Slider(start = self.StartDAC, end = self.EndDAC, value = 129, step = 1, title = 'Pixel-1 - Low Bin - Low Thresh') 
    Pix1_LowHigh = Slider(start = self.StartDAC, end = self.EndDAC, value = 204, step = 1, title = 'Pixel-1 - Low Bin - High Thresh') 
    Pix1_HighLow = Slider(start = self.StartDAC, end = self.EndDAC, value = 218, step = 1, title = 'Pixel-1 - High Bin - Low Thresh') 
    Pix1_HighHigh = Slider(start = self.StartDAC, end = self.EndDAC, value = 500, step = 1, title = 'Pixel-1 - High Bin - High Thresh') 

    plot1spect = figure(width=700, height=250, title='pixel-1 Spectrum') 
    plot1spect.line(self.SpectDACvals1[0], self.SpectrumData1[0], line_width=2) 
    plot1spect_LowLowSpan = Span(location=Pix1_LowLow.value, dimension = 'height') 
    plot1spect.add_layout(plot1spect_LowLowSpan) 
    plot1spect_LowHighSpan = Span(location=Pix1_LowHigh.value, dimension = 'height') 
    plot1spect.add_layout(plot1spect_LowHighSpan) 
    plot1spect_HighLowSpan = Span(location=Pix1_HighLow.value, dimension = 'height') 
    plot1spect.add_layout(plot1spect_HighLowSpan) 
    plot1spect_HighHighSpan = Span(location=Pix1_HighHigh.value, dimension = 'height') 
    plot1spect.add_layout(plot1spect_HighHighSpan) 
    #plot1spect.renderers.extend([plot1spect_LowLowSpan, plot1spect_LowHighSpan, plot1spect_HighLowSpan, plot1spect_HighHighSpan]) 

    plot1spill = figure(width=700, height=250, title='pixel-1 Spillover') 
    plot1spill.line(self.SpillDACvals1[0], self.SpillData1[0], line_width=2) 
    plot1spill_LowLowSpan = Span(location=Pix1_LowLow.value, dimension = 'height') 
    plot1spill.add_layout(plot1spill_LowLowSpan) 
    plot1spill_LowHighSpan = Span(location=Pix1_LowHigh.value, dimension = 'height') 
    plot1spill.add_layout(plot1spill_LowHighSpan) 
    plot1spill_HighLowSpan = Span(location=Pix1_HighLow.value, dimension = 'height') 
    plot1spill.add_layout(plot1spill_HighLowSpan) 
    plot1spill_HighHighSpan = Span(location=Pix1_HighHigh.value, dimension = 'height') 
    plot1spill.add_layout(plot1spill_HighHighSpan) 
    #plot1spill.renderers.extend([plot1spill_LowLowSpan, plot1spill_LowHighSpan, plot1spill_HighLowSpan, plot1spill_HighHighSpan]) 

    Pix1_LowLow.callback = CustomJS(args=dict(span1 = plot1spect_LowLowSpan, 
               span2 = plot1spill_LowLowSpan, 
               slider = Pix1_LowLow), 
               code = """span1.location = slider.value; span2.location = slider.value""") 
    Pix1_LowHigh.callback = CustomJS(args=dict(span1 = plot1spect_LowHighSpan, 
               span2 = plot1spill_LowHighSpan, 
               slider = Pix1_LowHigh), 
               code = """span1.location = slider.value; span2.location = slider.value""") 
    Pix1_HighLow.callback = CustomJS(args=dict(span1 = plot1spect_HighLowSpan, 
               span2 = plot1spill_HighLowSpan, 
               slider = Pix1_HighLow), 
               code = """span1.location = slider.value; span2.location = slider.value""") 
    Pix1_HighHigh.callback = CustomJS(args=dict(span1 = plot1spect_HighHighSpan, 
               span2 = plot1spill_HighHighSpan, 
               slider = Pix1_HighHigh), 
               code = """span1.location = slider.value; span2.location = slider.value""") 

は、プロットの繰り返しであるが、今の各スライダはそれぞれを操作します両方のプロットでスパン...