Python Bokeh 将绘图的一部分作为链接

Question

我有一个图，上面有多个图。我想在链接上制作矩形。类似的文档使所有绘图都链接起来，但是我只想将矩形作为链接。

我尝试了很多关于js_on_event、costum_js_on_tap等的想法...

示例尝试:

...
plot.line([1, seq_len], [-0.2, -0.2], color="black")
callback = OpenURL(url="google.com")
a = plot.rect(1, 1, 100, 1)
a.js_on_event('tap', callback)
...  

Answer 1

可能有一个更简单的方法，但这对我有用:

from bokeh.models import ColumnDataSource, TapTool,CustomJS
from bokeh.plotting import figure
from bokeh.embed import file_html
from bokeh.resources import INLINE

p = figure(plot_width=400, plot_height=400,
           tools="tap", title="The rectangles are links")

source1 = ColumnDataSource(data=dict(x1=[1],x2=[2],y1=[2],y2=[1],color=["navy"],url=["http://www.google.com"]))
source2 = ColumnDataSource(data=dict(x1=[2],x2=[3],y1=[5],y2=[4],color=["orange"],url=["https://stackoverflow.com"]))
source3 = ColumnDataSource(data=dict(x1=[3],x2=[4],y1=[8],y2=[7],color=["olive"],url=["https://docs.bokeh.org"]))

#glyphs with links
p.quad('x1','x2','y1','y2',color='color',source=source1)
p.quad('x1','x2','y1','y2',color='color',source=source2)
p.quad('x1','x2','y1','y2',color='color',source=source3)

#glyph without a link
p.circle(5, 5, size=20)

jscode="""
s=cb_data.source;
atr=s.attributes;
var d=atr.data;//d is the data dictionary
url=d.url;
url1=url[0]
if (url1.substring(0, 4) == 'http') {
    window.open(url);
} 
"""

taptool = p.select(type=TapTool)
taptool.callback = CustomJS(args=dict(source=source1), code=jscode)

#save file as .html
with open("bokehRectangleLink.html","w") as f:
    f.write(file_html(p, INLINE, "bokehRectangleLink"))

#open the .html in the browser
import webbrowser
webbrowser.open("bokehRectangleLink.html")