散景:同步链接图中的悬停工具提示 [英] Bokeh: Synchronizing hover tooltips in linked plots

问题描述

我有两个链接图.悬停时，我想在两个图中都出现一个工具提示.我已经成功地使用了链接选择，但是现在我也想链接工具提示.

I have two linked plots. When hovering, I would like to have a tooltip appear in both plots. I already use the linked selection with great success, but now I want to link the tooltips also.

下面是一个示例.工具提示将出现在左图中.如果我可以在正确的图中显示相应的工具提示，那将是很好的.相应的数据点是具有相同ID的数据点. (有一个共享的3D列数据源；每个图都有不同的2D视图.

Below is an example. The tooltip appears in the left plot. It would be great if I can have the corresponding tooltip appear in the right plot. The corresponding data point is the data point with the same ID. (There is a shared 3D column data source; each plot takes a different 2D view).

Ps.我会改善工具提示中的文字.

Ps. I'll improve the text in the tooltip.

更新

最后得到类似的东西:

推荐答案

我不确定如何直接使用工具提示功能来执行此操作，但是这是一种使用文本字形来模仿工具提示的方法:

I'm not sure how to use the tooltips function to do this directly, but here is a way to use a Text glyph to mimic a tooltip:

from bokeh.io import gridplot
from bokeh.plotting import figure, output_file, show
from bokeh.models import ColumnDataSource, Circle, HoverTool, CustomJS, Text
import numpy as np
(x, y, z) = np.arange(0, 100, 10), 100-np.arange(0, 100, 10), np.arange(0, 100, 10)/5

output_file("hover_callback.html")

p = figure(width=300, height=300, title='Hover over points', x_axis_label='x', y_axis_label='y')
p.scatter(x, y)
p2 = figure(width=300, height=300, title='Hover over points', x_axis_label='x', y_axis_label='z', x_range=p.x_range)
p2.scatter(x, z)

source = ColumnDataSource({'x': x, 'y': y, 'z': z, 'txt': ['x='+str(x[i])+', y='+str(y[i]) for i in range(len(x))], 'txt2': ['x='+str(x[i])+', z='+str(z[i]) for i in range(len(x))]})

invisible_circle = Circle(x='x', y='y', fill_color='gray', fill_alpha=0.0, line_color=None, size=20) # size determines how big the hover area will be
invisible_circle2 = Circle(x='x', y='z', fill_color='gray', fill_alpha=0.0, line_color=None, size=20)

invisible_text = Text(x='x', y='y', text='txt', text_color='black', text_alpha=0.0)
visible_text = Text(x='x', y='y', text='txt', text_color='black', text_alpha=0.5)

invisible_text2 = Text(x='x', y='z', text='txt2', text_color='black', text_alpha=0.0)
visible_text2 = Text(x='x', y='z', text='txt2', text_color='black', text_alpha=0.5)

cr = p.add_glyph(source, invisible_circle, selection_glyph=invisible_circle, nonselection_glyph=invisible_circle)
crt = p.add_glyph(source, invisible_text, selection_glyph=visible_text, nonselection_glyph=invisible_text)
cr2 = p2.add_glyph(source, invisible_circle2, selection_glyph=invisible_circle2, nonselection_glyph=invisible_circle2)
cr2t = p2.add_glyph(source, invisible_text2, selection_glyph=visible_text2, nonselection_glyph=invisible_text2)

code = "source.set('selected', cb_data['index']);"
callback = CustomJS(args={'source': source}, code=code)
p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr, crt]))
p2.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr2, cr2t]))
layout = gridplot([[p, p2]])
show(layout)

输出看起来像这样:

The output looks like this:

这篇关于散景:同步链接图中的悬停工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！