Ändern Sie die Form des Bokeh dynamisch Abbildung

Question

Ich baue eine Web-App, die Bilder als Teil einer Datenanalyse-Pipeline anzeigen wird. Dazu muss ich die Breite und Höhe eines Figure Objekts im Bokeh dynamisch ändern.

Mit dem folgenden Code wird die Form der Figure geändert, aber die Änderung wird nur wirksam, nachdem ich die Größe meines Browserfensters ändern, auch wenn die Größe des Browserfensters so klein ist.

import bokeh.plotting 
import bokeh.models 
import bokeh.layouts 

# set up the interface 
fig1 = bokeh.plotting.figure() 
button = bokeh.models.Button(label='scramble') 

# define a callback and connect it 
def callback(): 
    fig1.width = int(fig1.width * .8) 
button.on_click(callback) 

# add everything to the document 
bokeh.plotting.curdoc().add_root(bokeh.layouts.column(button, fig1)) 

Gibt es eine Update-Methode, die ich ausführen muss? Ich habe gelesen über "nächste Tick Callbacks", aber ich verstehe nicht, ob das relevant ist.

Das obige Verhalten tritt sowohl mit Firefox und Chrom auf meinem gnome System auf.

Answer 1

Der Grund dafür ist, dass das Layout nicht aktualisiert wird. Obwohl Ihr Code den Eigenschaftswert der Figur ändert, müssen Sie alle Werte im Dokumentlöser neu berechnen, damit eine tatsächliche Größenänderung eintritt. Hier

ist die Linie in BokehJS wo der Resize Haken passiert:

https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/document.coffee#L92

Nach Resize auf Dokumentebene genannt wird, die Größe Objekte neu rendern:

https://github.com/bokeh/bokeh/blob/master/bokehjs/src/coffee/models/layouts/layout_dom.coffee#L61

Die Das Problem ist, dass es meines Wissens derzeit keine offensichtliche Möglichkeit gibt, das Dokumentgrößenänderungsereignis erneut auszulösen.

Allerdings können Sie es Client-Seite tun. Hier arbeitet Code CustomJS:

test.py

from bokeh.io import show 
from bokeh.layouts import column 
from bokeh.models import Button, CustomJS 
from bokeh.plotting import figure 


fig = figure() 
button = Button(label='scramble') 
button.callback = CustomJS(args=dict(fig=fig), code=""" 
    var old_width = fig.width; 
    var doc = fig.document; 
    fig.width = old_width * 0.8; 
    doc.resize(); 
""") 

col = column(button, fig) 
show(col) 

Dies kann mit python test.py ausgeführt werden.

Hinweis Sie könnten dies auch tun mit Bokeh Server ersetzt die letzte Zeile show(col) mit curdoc().add_root(col), aber ich habe das nicht getan, um zu betonen, dass dies eine Client-seitige Lösung ist.

Answer 2

Es gibt eine Möglichkeit, Bokeh-Diagramme mit eingebauter Funktionalität dynamisch zu skalieren. Zum Beispiel

fig = plotting.figure(width=1200, height=900, title="Dynamic plot".format(chartType), sizing_mode='scale_width')

Der Schlüssel Option ist sizing_mode='scale_width'

Die width und height Befehle dienen als Anfangswerte. Es gibt andere Optionen für sizing_mode, also würde ich das untersuchen.