散景:同步链接图中的悬停工具提示

发布于 2021-01-29 14:09:49

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

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

在此处输入图片说明

附言 我将改进工具提示中的文本。

更新资料

最终得到如下结果:

在此处输入图片说明

关注者
0
被浏览
148
1 个回答
  • 面试哥
    面试哥 2021-01-29
    为面试而生,有面试问题,就找面试哥。

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

    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)
    

    输出如下:
    悬停示例



知识点
面圈网VIP题库

面圈网VIP题库全新上线,海量真题题库资源。 90大类考试,超10万份考试真题开放下载啦

去下载看看