运行自定义JS和工具提示的Bokeh TapTool
运行自定义JS和工具提示的Bokeh TapTool
提问于 2020-03-27 09:47:43
我在Bokeh中有一个应用程序，显示了一个带有不同圆圈集合的地图。我希望能够在点击圆圈时使用TapTool显示一个小的显示，类似于使用HoverTool显示的显示，运行JS代码并使用自定义的HTML模板。我在Fixed HoverTool TOOLTIPS when taping an element of a Bokeh plot的答案中找到了一个解决方案，其输出如下
然而，它的行为并不像预期的那样。不像HoverTool那样，信息显示在带有TapTool的选定圆圈旁边，而是显示在图的右侧，如下所示
。
我知道有一个很好的解释，比如正在使用的Bokeh版本(我尝试了1.0.4，1.4.0和2.0.0，输出相同)或其他一些配置问题，但我找不到它。我也尝试过不同的浏览器，以防万一，但输出是相同的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-03-27 13:38:35
问题是，Div最终被包装在另一个向右移动的div中，因为它属于与主绘图相同的Row。
以下是使用Bokeh 2.0.0的代码的更新片段：
div = Div(text='<div id="tooltip"></div>')
code = ''' if (cb_data.source.selected.indices.length > 0){
const selected_index = cb_data.source.selected.indices[0];
const tooltip = document.getElementById("tooltip");
const tooltip_wrapper = tooltip.parentElement.parentElement;
if (tooltip_wrapper.className !== 'bk')
throw new Error('Unable to find the correct tooltip wrapper element');
tooltip_wrapper.style.left = Number(cb_data.geometries.sx) + Number(20) + 'px';
tooltip_wrapper.style.top = Number(cb_data.geometries.sy) - Number(20) + 'px';
tooltip.style.display = 'block';
tp = tp.replace('@imgs', cb_data.source.data.imgs[selected_index]);
tp = tp.replace('@desc', cb_data.source.data.desc[selected_index]);
tp = tp.replace('@fonts{safe}', cb_data.source.data.fonts[selected_index]);
tp = tp.replace('$index', selected_index);
tp = tp.replace('$x', Math.round(cb_data.geometries.x));
tp = tp.replace('$y', Math.round(cb_data.geometries.y));
tooltip.innerHTML = tp;
} '''
p.select(TapTool).callback = CustomJS(args={'circles': circles, 'tp': TOOLTIPS}, code=code)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60878836
复制相关文章
相似问题