2017-06-20 82 views
2

我已經使用bqplot在Jupyter筆記本中創建了幾個圖。這些繪圖使用Jupyter小部件HBox和VBox佈局屬性進行排列。但是,我無法弄清楚如何在各個子圖之間獲得緊密的佈局。獲得更緊密佈局的最佳方法是什麼?jupyter bqplot數字更緊密的佈局

下面是在Jupyter筆記本中運行的Python代碼示例。

import numpy as np 
from bqplot import * 
from IPython.display import Javascript, display, clear_output 
import ipywidgets as widgets 

size = 100 
scale = 100. 
np.random.seed(0) 
x_data = np.arange(size) 
y_data = np.cumsum(np.random.randn(size) * scale) 

x_sc = LinearScale() 
y_sc = LinearScale() 

ax_x = Axis(label='X', scale=x_sc, grid_lines='solid') 
ax_y = Axis(label='Y', scale=y_sc, orientation='vertical', grid_lines='solid') 

line = Lines(x=x_data, y=x_data, scales={'x': x_sc, 'y': y_sc}) 

figy=[] 
for i in range(2): 
    figx=[] 
    for j in range(3): 
     figx.append(Figure(axes=[ax_x, ax_y], marks=[line], title='Example' + str(i*3+j), fig_margin = dict(top=30, bottom=10, left=20, right=20))) 
    figy.append(widgets.HBox(figx)) 
display(widgets.VBox(figy, align_content = 'stretch')) 

enter image description here

回答

2

這裏是一個解決方案:

import numpy as np 
from bqplot import * 
from IPython.display import Javascript, display, clear_output 
import ipywidgets as widgets 

size = 100 
scale = 100. 
np.random.seed(0) 
x_data = np.arange(size) 
y_data = np.cumsum(np.random.randn(size) * scale) 

x_sc = LinearScale() 
y_sc = LinearScale() 

ax_x = Axis(label='X', scale=x_sc, grid_lines='solid') 
ax_y = Axis(label='Y', scale=y_sc, orientation='vertical', grid_lines='solid') 

line = Lines(x=x_data, y=x_data, scales={'x': x_sc, 'y': y_sc}) 

fig_layout = widgets.Layout(width='auto', height='auto') 

figy=[] 
for i in range(2): 
    figx=[] 
    for j in range(3): 
     figx.append(Figure(layout=fig_layout, axes=[ax_x, ax_y], marks=[line], title='Example' + str(i*3+j), fig_margin = dict(top=30, bottom=10, left=20, right=20))) 
    figy.append(widgets.HBox(figx)) 
display(widgets.VBox(figy, align_content = 'stretch')) 

基本上覆蓋該圖的屬性layout。 bqplot數字有固定的自然高度。

enter image description here

0

每個HBoxVBox接受一個ipywidgets Layout實例。你可以修改它的屬性。

http://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html

+0

是的。我試過Box小部件,並試圖加載不同的設置,但我無法解決這個問題。明天我會再玩一次。 – DougR

+1

嘗試右鍵單擊,直接在CSS中作爲快捷方式找出正確的配置,然後點擊檢查並直接使用框進行操作。 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ – Drew

+0

德魯,謝謝你的提示。但是,我仍然無法解決這個問題。我確實玩過可用於特定配置的負邊距。但是,當使用不同的佈局(子圖的數量,jupyter單元的寬度等)時,該方法不一致。我可能會問ipywidgets gitter頻道的人。 – DougR