时间戳

首页 > 解决方案 > Bokeh TapTool 运行自定义 JS 和工具提示

python - Bokeh TapTool 运行自定义 JS 和工具提示

问题描述

我在 Bokeh 中有一个应用程序，显示一张带有不同圆圈集的地图。我希望能够使用 TapTool 在点击一个圆圈时显示一个小显示，类似于使用 HoverTool 显示的显示，运行 JS 代码并使用自定义 HTML 模板。在录制散景图的元素时，我在 Fixed HoverTool TOOLTIPS的答案中找到了一个解决方案，其输出如下在此处输入图像描述

然而，它的行为并不像预期的那样。信息不会像 HoverTool 那样使用 TapTool 显示在选定的圆圈旁边，而是显示在图的右侧，如此处所示 代码解决方案输出截图。

我知道对此有一个很好的解释，比如正在使用的 Bokeh 版本（我尝试了 1.0.4、1.4.0 和 2.0.0，具有相同的输出）或其他一些配置问题，但我找不到它。我也试过不同的浏览器，以防万一，但输出是一样的。

标签： pythonbokeh

解决方案

问题是它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)

推荐阅读