我在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,具有相同的输出)或其他一些配置问题,但是我找不到它。我还尝试了不同的浏览器,以防万一,但是输出是相同的。
答案 0 :(得分:0)
问题在于Div
最终被另一个div
包裹,该Row
与主图属于同一个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)
。
这是与Bokeh 2.0.0兼容的代码的更新段:
v1.10.0