如何在 Jupyter notebook 中獲得交互式散景

Question

我正准備將散景用於我編寫的一些 Python 模型的交互式在線實現。

第 1 步是了解一些基本的交互式示例，但我無法在 Jupyter 筆記本中獲得交互式運行的介紹性示例。 我希望有人能糾正我對什么是散景自己的示例代碼的復制粘貼的誤解。

我知道 Bokeh 文檔並不完美（我修復了對bokeh.plotting.show而不是io.show的過時引用），但我認為我使用的基本結構應該接近正確。

代碼基於： https : //github.com/bokeh/bokeh/blob/master/examples/app/sliders.py

https://docs.bokeh.org/en/latest/docs/user_guide/notebook.html

############ START BOILERPLATE ############
#### Interactivity -- BOKEH
import bokeh.plotting.figure as bk_figure
from bokeh.io import curdoc, show
from bokeh.layouts import row, widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Slider, TextInput
from bokeh.io import output_notebook # enables plot interface in J notebook
# init bokeh
output_notebook()
############ END BOILERPLATE ############

# Set up data
N = 200
x = np.linspace(0, 4*np.pi, N)
y = np.sin(x)
source = ColumnDataSource(data=dict(x=x, y=y))

# Set up plot
plot = bk_figure(plot_height=400, plot_width=400, title="my sine wave",
              tools="crosshair,pan,reset,save,wheel_zoom",
              x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])

plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

# Set up widgets
text = TextInput(title="title", value='my sine wave')
offset = Slider(title="offset", value=0.0, start=-5.0, end=5.0, step=0.1)
amplitude = Slider(title="amplitude", value=1.0, start=-5.0, end=5.0, step=0.1)
phase = Slider(title="phase", value=0.0, start=0.0, end=2*np.pi)
freq = Slider(title="frequency", value=1.0, start=0.1, end=5.1, step=0.1)

# Set up callbacks
def update_title(attrname, old, new):
    plot.title.text = text.value

text.on_change('value', update_title)

def update_data(attrname, old, new):
    # Get the current slider values
    a = amplitude.value
    b = offset.value
    w = phase.value
    k = freq.value

    # Generate the new curve
    x = np.linspace(0, 4*np.pi, N)
    y = a*np.sin(k*x + w) + b

    source.data = dict(x=x, y=y)
    ### I thought I might need a show() here, but it doesn't make a difference if I add one
    # show(layout)

for w in [offset, amplitude, phase, freq]:
    w.on_change('value', update_data)


# Set up layouts and add to document
inputs = widgetbox(text, offset, amplitude, phase, freq)
layout = row(plot,
             widgetbox(text, offset, amplitude, phase, freq))
curdoc().add_root(row(inputs, layout, width=800))
curdoc().title = "Sliders"

show(layout)

我生成如下圖，但當滑塊移動時（也不更新標題文本），圖形不會更新

非常感謝您的任何建議。

附注。 我試圖使此代碼盡可能接近我可以在服務器上使用 .py 文件實現的內容，從而避免使用 jupyter 特定的解決方法，例如push_notebook 。

Answer 1

我同意（作為用戶）文檔在這方面可能會更好。 我不得不搜索很多才能找到程序，但是當你找到它時，它並沒有那么難！ 我修改了你的代碼，你可以在 Jupyter notebook 中運行它。

訣竅是：

from bokeh.application import Application
from bokeh.application.handlers import FunctionHandler
.
.
<your code here>
.
.
#add server-related code inside this modify_doc function
def modify_doc(doc): #use doc as you use curdoc() in bokeh server
    doc.add_root(<your_layout>)
    doc.on_change(...)
    doc.add_periodic_callback(...) 


handler = FunctionHandler(modify_doc)
app = Application(handler)
show(app)

以及您的代碼的修改版本：

############ START BOILERPLATE ############
#### Interactivity -- BOKEH
import bokeh.plotting.figure as bk_figure
from bokeh.io import curdoc, show
from bokeh.layouts import row, widgetbox
from bokeh.models import ColumnDataSource
from bokeh.models.widgets import Slider, TextInput
from bokeh.io import output_notebook # enables plot interface in J notebook
import numpy as np
# init bokeh

from bokeh.application import Application
from bokeh.application.handlers import FunctionHandler


output_notebook()
############ END BOILERPLATE ############

# Set up data
N = 200
x = np.linspace(0, 4*np.pi, N)
y = np.sin(x)
source = ColumnDataSource(data=dict(x=x, y=y))

# Set up plot
plot = bk_figure(plot_height=400, plot_width=400, title="my sine wave",
              tools="crosshair,pan,reset,save,wheel_zoom",
              x_range=[0, 4*np.pi], y_range=[-2.5, 2.5])

plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

# Set up widgets
text = TextInput(title="title", value='my sine wave')
offset = Slider(title="offset", value=0.0, start=-5.0, end=5.0, step=0.1)
amplitude = Slider(title="amplitude", value=1.0, start=-5.0, end=5.0, step=0.1)
phase = Slider(title="phase", value=0.0, start=0.0, end=2*np.pi)
freq = Slider(title="frequency", value=1.0, start=0.1, end=5.1, step=0.1)

# Set up callbacks
def update_title(attrname, old, new):
    plot.title.text = text.value



def update_data(attrname, old, new):
    # Get the current slider values
    a = amplitude.value
    b = offset.value
    w = phase.value
    k = freq.value

    # Generate the new curve
    x = np.linspace(0, 4*np.pi, N)
    y = a*np.sin(k*x + w) + b

    source.data = dict(x=x, y=y)
    ### I thought I might need a show() here, but it doesn't make a difference if I add one
    # show(layout)

for w in [offset, amplitude, phase, freq]:
    w.on_change('value', update_data)


# Set up layouts and add to document
inputs = widgetbox(text, offset, amplitude, phase, freq)
layout = row(plot,
             widgetbox(text, offset, amplitude, phase, freq))



def modify_doc(doc):
    doc.add_root(row(layout, width=800))
    doc.title = "Sliders"
    text.on_change('value', update_title)


handler = FunctionHandler(modify_doc)
app = Application(handler)
show(app)

Answer 2

您正在看bokeh的服務器示例，看一下bokeh筆記本存儲庫，特別是活頁夾教程 。 有一個專門用於交互的筆記本，請看單元格[10] 。