Question

我有两个情节，我想与ipython笔记本小部件进行交互。下面的代码是我正在尝试做的简化示例。

import matplotlib.pyplot as plt
import IPython.html.widgets as wdg

def displayPlot1(rngMax = 10):
    plt.figure(0)
    plt.plot([x for x in range(0, rngMax)])

wdg1 = wdg.interactive(displayPlot1, rngMax = wdg.IntSlider(20))

def displayPlot2(rngMax = 10):
    plt.figure(1)
    plt.plot([x**2 for x in range(0, rngMax)])

wdg2 = wdg.interactive(displayPlot2, rngMax = wdg.IntSlider(10))

wdg.ContainerWidget([wdg.HTML("""<h1>First Plot</h1>"""),
                     wdg1, 
                     wdg.HTML("""<h1>Second Plot</h1>"""), 
                     wdg2])

第一个问题是它首先显示所有小部件，最后一个接着显示两个小部件：

title1
widget1
title2
widget2
plot1
plot2

我想：

title1
widget1
plot1    
title2
widget2
plot2

当我触摸任何滑块时，整个输出似乎都会被覆盖，并且只显示一个图（我正在改变的图）。

如何解决此问题？（如果我将它们分成两个不同的单元格，我可能会这样做，但是我打算做一些更复杂的事情，最终需要在一个单元格中）

Answer 1

IPython Notebook在任何输出之前显示小部件。您可以做的一件事就是将您的情节放在HTML widget内。这可以放在相对于其他小部件的任何位置。

但是，如果您这样做，则需要明确地将您的绘图放在HTML小部件中。这可能有点棘手，但快速解决方案是将绘图的字节字符串保存到缓冲区，然后将字节字符串放在图像标记中。

以下是一个示例（Gist here）：

import base64
import io
import matplotlib.pyplot as plt
import ipywidgets as widgets
from IPython.display import display

def handle_input1(slope):
    plt.figure()
    plt.plot([x * slope for x in range(0, 11)])
    plt.ylim((0,10))
    output1HTML.value = plot_to_html()
    plt.close()

def handle_input2(curvature):
    plt.figure()
    plt.plot([x * x * curvature for x in range(0, 11)])
    plt.ylim((0,100))
    output2HTML.value = plot_to_html()
    plt.close()

def plot_to_html():
    # write image data to a string buffer and get the PNG image bytes
    buf = io.BytesIO()
    plt.savefig(buf, format='png')
    buf.seek(0)
    return """<img src='data:image/png;base64,{}'/>""".format(base64.b64encode(buf.getvalue()).decode('ascii'))

plt.ioff()

heading1HTML = widgets.HTML("""<h1>Slope</h1>""")
input1Float = widgets.FloatSlider(value=0.5, min=0.0, max=1.0, step=0.01, description="slope: ")
widgets.interactive(handle_input1, slope=input1Float)
output1HTML = widgets.HTML()

heading2HTML = widgets.HTML("""<h1>Curvature</h1>""")
input2Float = widgets.FloatSlider(value=0.5, min=0.0, max=1.0, step=0.01, description="curvature: ")
widgets.interactive(handle_input2, curvature=input2Float)
output2HTML = widgets.HTML()

display(widgets.Box([heading1HTML, input1Float, output1HTML, heading2HTML, input2Float, output2HTML]))

handle_input1(input1Float.value)
handle_input2(input2Float.value)

编辑1 ：IPython小部件已移至IPython.html;相应地更新了代码。

编辑2 ：根据最新的IPython widgets documentation使用widgets.interactive;再次更新IPython小部件位置;添加ASCII编码

ipython笔记本小部件

1 个答案: