交互式绘图放置在ipython笔记本小部件中

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小部件中.这可以放在相对于其他小部件的任何位置.

但是,如果您这样做,则需要明确地将您的绘图放在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.interactive ; 再次更新IPython小部件位置; 添加ASCII编码