Bokeh TapTool работает под управлением JS и всплывающих подсказок - PullRequest
Новая
       3

Bokeh TapTool работает под управлением JS и всплывающих подсказок

0 голосов
/ 27 марта 2020

У меня есть приложение в Боке, показывающее карту с различными наборами кругов. Я хочу иметь возможность использовать TapTool для отображения небольшого экрана при нажатии на кружок, аналогичного показанному для HoverTool, с кодом JS и использованием пользовательского шаблона HTML. Я нашел решение в ответе Fixed HoverTool TOOLTIPS при подключении к элементу графика Боке , выход которого ниже enter image description here

Однако его поведение не так, как ожидалось. Вместо отображения информации рядом с выбранным кружком с помощью TapTool, как это делает HoverTool, информация отображается справа от графика, как это можно увидеть здесь screenshot of code solution output.

Я знаю, что этому есть очень хорошее объяснение, например, используемая версия Bokeh (я пробовал 1.0.4, 1.4.0 и 2.0.0 с тем же выводом) или какая-то другая проблема конфигурации, но я не могу ее найти , Я также на всякий случай пробовал разные браузеры, но вывод одинаковый.

1 Ответ

0 голосов
/ 27 марта 2020

Проблема заключается в том, что 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)
...