在 Python 中使用 Bokeh 在绘图之间链接 Span 或 Cursor

我想要一个链接到 Bokeh 中的图的光标。因此，如果我将光标移动到一个图上，则相邻图上会显示一条等效线。我还没弄清楚如何使用内置的光标工具来做到这一点。所以我当前的解决方案是在共享源的每个图上画一条线。然后，当我将鼠标悬停在任一图上时，源都会更新。

我对这个方法有两个问题： 1.这似乎是一个解决方法 2. 目前线路长度有限。我希望这条线是无限的，所以无论如何调整图形的大小，这条线都会超出边缘。目前我画的线是有限的。绘制无限水平线的正确方法是 Span 注释，但我很难弄清楚如何通过回调传递/更新 Span 位置。请参阅下面的我的代码。

from bokeh.io import gridplot, show, output_notebook, output_file
from bokeh.plotting import figure
from bokeh.models import HoverTool, ColumnDataSource, CustomJS, Span


output_notebook()

x = list(range(11))
y1 = x
y2 = [10 - i for i in x]


source = ColumnDataSource({'x0': [0], 'y0': [2], 'x1': [10], 'y1': [2]})

# create a new plot
s1 = figure(width=250, plot_height=250, tools="", title=None)
cr1 = s1.circle(x, y1, size=10, color="navy", alpha=0.5)
sr1 = s1.segment(x0='x0', y0='y0', x1='x1', y1='y1', color='red', alpha=1, line_width=1, source=source, )
sp1 = Span(location=source.data['y0'][0], dimension='width', line_color='green') 
s1.renderers.extend([sp1,])

# create another one
s2 = figure(width=250, height=250, title=None)
cr2 = s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)
sr2 = s2.segment(x0='x0', y0='y0', x1='x1', y1='y1', color='red', alpha=1, line_width=1, source=source, )

# put all the plots in an HBox
p = gridplot([[s1,s2],[]])

code = """
var data = {'x0': [], 'y0': [], 'x1': [], 'y1': []};
var cdata = circle.get('data');
var indices = cb_data.index['1d'].indices;

for (i=0; i < indices.length; i++) {
    ind0 = indices[i];
        data['x0'].push(0);
        data['y0'].push(cdata.y[ind0]);
        data['x1'].push(10);
        data['y1'].push(cdata.y[ind0]);

}
segment.set('data', data);
""" 


callback1 = CustomJS(args={'circle': cr1.data_source, 'segment': sr2.data_source}, code=code)
s1.add_tools(HoverTool(tooltips=None, callback=callback1, renderers=[cr1]))

callback2 = CustomJS(args={'circle': cr2.data_source, 'segment': sr2.data_source}, code=code)
s2.add_tools(HoverTool(tooltips=None, callback=callback2, renderers=[cr2]))


# show the results
show(p)

感谢@bigreddot 对跨度的回答。我曾尝试过，但没有开始工作，但根据他的提示弄清楚了。工作代码如下。我在每个图中实现了一个跨度，然后编辑每个图的位置。

from bokeh.io import gridplot, show, output_notebook, output_file
from bokeh.plotting import figure
from bokeh.models import HoverTool, ColumnDataSource, CustomJS, Span

output_file('Test.html')

#output_notebook()

x = list(range(11))
y1 = x
y2 = [10 - i for i in x]

# create a new plot
s1 = figure(width=250, plot_height=250, tools="", title=None)
cr1 = s1.circle(x, y1, size=10, color="navy", alpha=0.5)
sp1 = Span(location=source.data['y0'][0], dimension='width', line_color='green',  render_mode='css') 
s1.renderers.extend([sp1,])

# create another one
s2 = figure(width=250, height=250, title=None)
cr2 = s2.triangle(x, y1, size=10, color="firebrick", alpha=0.5)
sp2 = Span(location=source.data['y0'][0], dimension='width', line_color='green', render_mode='css')
s2.renderers.extend([sp2,])

# put all the plots in an HBox
p = gridplot([[s1,s2],[]])

code = """
var cdata = circle.get('data');
var indices = cb_data.index['1d'].indices;

var sum = 0;

for (i=0; i < indices.length; i++) {
    sum += cdata.y[indices[i]];
}

var avg = sum/indices.length
span1.set('location', [avg])
span2.set('location', [avg])
""" 

callback1 = CustomJS(args={'circle': cr1.data_source,  'span1': sp1, 'span2': sp2}, code=code)
s1.add_tools(HoverTool(tooltips=None, callback=callback1, renderers=[cr1]))

callback2 = CustomJS(args={'circle': cr2.data_source, 'span1': sp1, 'span2': sp2}, code=code)
s2.add_tools(HoverTool(tooltips=None, callback=callback2, renderers=[cr2]))

# show the results
show(p)