在 jupyter 实验室中使用交互式绘图时控制图形高度

Question

我正在尝试结合使用JupyterLab和最新的ipywidgets来拥有一个基本的图形界面来探索一些数据。但是，我找不到为交互式情节设置图形高度的方法

笔记本加载一些文件，然后用户可以使用小部件传递一些输入(在文本框下面的代码中(。最后，通过按下按钮，将生成图形并将其传递给输出小部件。

这是示例代码：

import pandas as pd
import matplotlib.pyplot as plt
from IPython.display import clear_output, display
import ipywidgets as widgets
data = pd.read_csv('data.csv')
def show_results(input):
    if 'fig' in locals():
        del fig
    with out:
        clear_output(True)
        fig, ax = plt.subplots(1, 1)
        ax.axis('equal')
        data.loc[input.value].plot(cmap='inferno_r', column='probability', ax=ax, legend=True)
        plt.show()

input = widgets.Text(placeholder='input field', description='Input:')
showMe = widgets.Button(
    description='Show me the results',
    tooltip='Show me',
)
out = widgets.Output(layout = {
            'width': '100%',
            'height': '900px',
            'border': '1px solid black'
        })

showMe.on_click(show_results)
display(input)
display(showMe)
display(out)

问题是，无论输出小部件有多大，也无论传递的 figsize 参数如何，图形都会自动调整大小。我希望两者之一能够控制输出大小，特别是因为没有更多手动调整图形大小的选项。

作为附加信息，无论我做什么，处理输出小部件中图形的 HTMLdiv 始终是 500px 高度

Answer 1

经过大量研究找到了解决方案。目前，github上有一个悬而未决的问题，讨论%matplotlib widget与matplotlib的其他部分相比的行为有何不同。这是讨论的链接

基本上，这个后端利用了jupyter小部件并将图形传递给输出小部件。就我而言，我将其嵌套到另一个输出小部件中以捕获情节。在这种情况下，绘图的 figsize 属性和外部输出小部件的 CSS 布局属性都不会产生影响，因为问题出在这个中间输出小部件上。

好消息是，我们需要更改的 CSS 布局属性已公开。要修改它们，我们可以使用：

fig.canvas.layout.width = '100%'
fig.canvas.layout.height = '900px'

Answer 2

上述解决方案对我不起作用。既没有使用全局设置绘图维度rcParams但我仍然设法让它使用 fig = plt.figure(figsize=(12,12)) 在函数内设置图形维度：

from ipywidgets import interactive
import matplotlib.pyplot as plt
import numpy as np
np.random.rand(33,20)
def f():
    fig = plt.figure(figsize=(15,15)) # <-- Here the figure dimension is controlled
    ax = fig.add_subplot()
    ax.imshow(np.random.rand(33,20)/65536)
    plt.show()
interactive_plot = interactive(f, r = (0,15),g = (0,15),b = (0,15))
interactive_plot