Javascript 如何在画布之外为bokeh绘图生成动态描述文本？

我有一个带有多个标志符号的bokeh图和一个javascript回调函数，该函数根据鼠标在图中的悬停位置混合其他标志符号

现在，我想根据鼠标在左侧绘图中的悬停（或可能单击）位置，在绘图外的右侧添加一个带有附加信息的描述

如何为画布外的bokeh绘图生成动态变化的描述文本

我的想法是编写一个java脚本回调函数，在绘图外更改div的文本，但我不确定这是否可行，也不确定如何实现

使用悬停工具是可能的，但我的描述太长，无法显示为覆盖框

下面是我想动态更改的div的一些示例代码：

from bokeh.models import ColumnDataSource, CustomJS, HoverTool, Div, Spacer
from bokeh.plotting import figure, output_file, show
from bokeh.layouts import row

output_file("hover_callback.html")

# define some points and a little graph between them
x = [2, 3, 5, 6, 8, 7]
y = [6, 4, 3, 8, 7, 5]
links = {
    0: [1, 2],
    1: [0, 3, 4],
    2: [0, 5],
    3: [1, 4],
    4: [1, 3],
    5: [2, 3, 4]
}

p = figure(plot_width=400, plot_height=400, tools="", toolbar_location=None, title='Hover over points')

source = ColumnDataSource({'x0': [], 'y0': [], 'x1': [], 'y1': []})
sr = p.segment(x0='x0', y0='y0', x1='x1', y1='y1', color='olive', alpha=0.6, line_width=3, source=source, )
cr = p.circle(x, y, color='olive', size=30, alpha=0.4, hover_color='olive', hover_alpha=1.0)

# Add a hover tool, that sets the link data for a hovered circle
code = """
const links = %s
const data = {'x0': [], 'y0': [], 'x1': [], 'y1': []}
const indices = cb_data.index.indices

console.log(cb_data.index.indices)

for (var i = 0; i < indices.length; i++) {
    const start = indices[i]
    for (var j = 0; j < links[start].length; j++) {
        const end = links[start][j]
        data['x0'].push(circle.data.x[start])
        data['y0'].push(circle.data.y[start])
        data['x1'].push(circle.data.x[end])
        data['y1'].push(circle.data.y[end])
    }
}
segment.data = data
""" % links

callback = CustomJS(args={'circle': cr.data_source, 'segment': sr.data_source}, code=code)
p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))


div = Div(text="""<br>
Here is were I want to display some additional information about the point that is currently hovered over.""",
width=200, height=100)

show(row(p,Spacer(width=20), div))

从bokeh.models导入ColumnDataSource、CustomJS、HoverTool、Div、Spacer
从bokeh.plotting导入图形，输出_文件，显示
从bokeh.layouts导入行
输出文件（“hover\u callback.html”）
#定义一些点和它们之间的一个小图形
x=[2,3,5,6,8,7]
y=[6,4,3,8,7,5]
链接={
0: [1, 2],
1: [0, 3, 4],
2: [0, 5],
3: [1, 4],
4: [1, 3],
5: [2, 3, 4]
}
p=图形（绘图宽度=400，绘图高度=400，工具=”，工具栏位置=无，标题=“悬停在点上”）
source=ColumnDataSource（{'x0'：[]，'y0'：[]，'x1'：[]，'y1'：[]}）
sr=p.段（x0='x0'，y0='y0'，x1='x1'，y1='y1'，颜色='橄榄色'，α=0.6，线宽=3，震源=震源，）
cr=p.圆形（x，y，color='olive'，size=30，alpha=0.4，hover_color='olive'，hover_alpha=1.0）
#添加一个悬停工具，用于设置悬停圆的链接数据
代码=”“
常量链接=%s
常量数据={'x0'：[]，'y0'：[]，'x1'：[]，'y1'：[]
常数指数=cb_数据指数指数
log（cb_data.index.index）
对于（var i=0；i
下面是我想要显示的关于当前悬停点的一些附加信息。“”，
宽度=200，高度=100）
显示（行（p，间隔条（宽度=20），分区））

查看此示例，它正是您想要的：

---

简而言之，您可以使用

Div

模型，并将其

text

属性更改为您想要的任何属性。

查看此示例，它完全满足您的要求：

简而言之，您可以使用

Div

模型，并将其

text

属性更改为您想要的任何属性。

我发现：

from bokeh.models import ColumnDataSource, CustomJS, HoverTool, Div, Spacer
from bokeh.plotting import figure, output_file, show
from bokeh.layouts import row

output_file("hover_callback.html")

# define some points and a little graph between them
x = [2, 3, 5, 6, 8, 7]
y = [6, 4, 3, 8, 7, 5]
links = {
    0: [1, 2],
    1: [0, 3, 4],
    2: [0, 5],
    3: [1, 4],
    4: [1, 3],
    5: [2, 3, 4]
}

p = figure(plot_width=400, plot_height=400, tools="", toolbar_location=None, title='Hover over points')

source = ColumnDataSource({'x0': [], 'y0': [], 'x1': [], 'y1': []})
sr = p.segment(x0='x0', y0='y0', x1='x1', y1='y1', color='olive', alpha=0.6, line_width=3, source=source, )
cr = p.circle(x, y, color='olive', size=30, alpha=0.4, hover_color='olive', hover_alpha=1.0)

# Add a hover tool, that sets the link data for a hovered circle
code = """
const links = %s
const data = {'x0': [], 'y0': [], 'x1': [], 'y1': []}
const indices = cb_data.index.indices

console.log(cb_data.index.indices)

for (var i = 0; i < indices.length; i++) {
    const start = indices[i]
    for (var j = 0; j < links[start].length; j++) {
        const end = links[start][j]
        data['x0'].push(circle.data.x[start])
        data['y0'].push(circle.data.y[start])
        data['x1'].push(circle.data.x[end])
        data['y1'].push(circle.data.y[end])
    }
}
segment.data = data
""" % links

callback = CustomJS(args={'circle': cr.data_source, 'segment': sr.data_source}, code=code)
p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))


div = Div(text="""<br>
Here is were I want to display some additional information about the point that is currently hovered over.""",
width=200, height=100)

new_code = """
console.log(div_object.text)

const indices = cb_data.index.indices

console.log(indices)

if (indices == undefined || indices.length == 0){{
    div_object.text = ""
}}
else {{
    div_object.text = " currently point with index <b>" + indices.toString(10) + "</b> is selected. Here follows a very long description... <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare metus at justo semper finibus. Donec malesuada ut nisl ac convallis. Nulla laoreet in metus non dictum. In odio libero, elementum sit amet mi vitae, iaculis tincidunt sem. Quisque eget auctor massa. Nunc pulvinar cursus eros vitae bibendum. Integer vitae pharetra nulla. Integer vitae iaculis ligula. Cras elementum neque magna, posuere semper leo iaculis nec. Curabitur vel neque ut massa efficitur luctus. In at enim sed est pulvinar rhoncus. Aliquam dictum venenatis interdum. Pellentesque accumsan imperdiet varius."
}}

"""

callback = CustomJS(args={'div_object': div}, code=new_code)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))


show(row(p,Spacer(width=20), div))

从bokeh.models导入ColumnDataSource、CustomJS、HoverTool、Div、Spacer
从bokeh.plotting导入图形，输出_文件，显示
从bokeh.layouts导入行
输出文件（“hover\u callback.html”）
#定义一些点和它们之间的一个小图形
x=[2,3,5,6,8,7]
y=[6,4,3,8,7,5]
链接={
0: [1, 2],
1: [0, 3, 4],
2: [0, 5],
3: [1, 4],
4: [1, 3],
5: [2, 3, 4]
}
p=图形（绘图宽度=400，绘图高度=400，工具=”，工具栏位置=无，标题=“悬停在点上”）
source=ColumnDataSource（{'x0'：[]，'y0'：[]，'x1'：[]，'y1'：[]}）
sr=p.段（x0='x0'，y0='y0'，x1='x1'，y1='y1'，颜色='橄榄色'，α=0.6，线宽=3，震源=震源，）
cr=p.圆形（x，y，color='olive'，size=30，alpha=0.4，hover_color='olive'，hover_alpha=1.0）
#添加一个悬停工具，用于设置悬停圆的链接数据
代码=”“
常量链接=%s
常量数据={'x0'：[]，'y0'：[]，'x1'：[]，'y1'：[]
常数指数=cb_数据指数指数
log（cb_data.index.index）
对于（var i=0；i
下面是我想要显示的关于当前悬停点的一些附加信息。“”，
宽度=200，高度=100）
新_代码=”“
console.log（div_object.text）
常数指数=cb_数据指数指数
console.log（索引）
如果（索引==未定义的| |索引.length==0）{{
div_object.text=“”
}}
否则{{
div_object.text=“当前带有索引的点”+索引.toString（10）+”被选中。下面是一个很长的描述…
洛雷姆·伊普苏姆·多洛·塞特·塞特·塞姆佩尔·菲尼布斯（justo semper finibus）的多奈克·奥纳尔·梅特斯（Donec ornare metus）。多奈克·马莱苏达（Donec malesuada ut ut nisl ac convallis）。默多拉·拉奥里特（Nulla laoreet）在《无言的梅特斯》（metus non dictum）。在《自由之奥迪奥》中，多姆·维塔（odio libero），艾库利斯·廷西德（Iacdu生命之爱。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母，生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之母。生命之
}}
"""
callback=CustomJS（args={'div_object'：div}，code=new_code）
p、 添加工具（HoverTool（工具提示=无，回调=回调，渲染器=[cr]））
显示（行（p，间隔条（宽度=20），分区））

我想出来了：

from bokeh.models import ColumnDataSource, CustomJS, HoverTool, Div, Spacer
from bokeh.plotting import figure, output_file, show
from bokeh.layouts import row

output_file("hover_callback.html")

# define some points and a little graph between them
x = [2, 3, 5, 6, 8, 7]
y = [6, 4, 3, 8, 7, 5]
links = {
    0: [1, 2],
    1: [0, 3, 4],
    2: [0, 5],
    3: [1, 4],
    4: [1, 3],
    5: [2, 3, 4]
}

p = figure(plot_width=400, plot_height=400, tools="", toolbar_location=None, title='Hover over points')

source = ColumnDataSource({'x0': [], 'y0': [], 'x1': [], 'y1': []})
sr = p.segment(x0='x0', y0='y0', x1='x1', y1='y1', color='olive', alpha=0.6, line_width=3, source=source, )
cr = p.circle(x, y, color='olive', size=30, alpha=0.4, hover_color='olive', hover_alpha=1.0)

# Add a hover tool, that sets the link data for a hovered circle
code = """
const links = %s
const data = {'x0': [], 'y0': [], 'x1': [], 'y1': []}
const indices = cb_data.index.indices

console.log(cb_data.index.indices)

for (var i = 0; i < indices.length; i++) {
    const start = indices[i]
    for (var j = 0; j < links[start].length; j++) {
        const end = links[start][j]
        data['x0'].push(circle.data.x[start])
        data['y0'].push(circle.data.y[start])
        data['x1'].push(circle.data.x[end])
        data['y1'].push(circle.data.y[end])
    }
}
segment.data = data
""" % links

callback = CustomJS(args={'circle': cr.data_source, 'segment': sr.data_source}, code=code)
p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))


div = Div(text="""<br>
Here is were I want to display some additional information about the point that is currently hovered over.""",
width=200, height=100)

new_code = """
console.log(div_object.text)

const indices = cb_data.index.indices

console.log(indices)

if (indices == undefined || indices.length == 0){{
    div_object.text = ""
}}
else {{
    div_object.text = " currently point with index <b>" + indices.toString(10) + "</b> is selected. Here follows a very long description... <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ornare metus at justo semper finibus. Donec malesuada ut nisl ac convallis. Nulla laoreet in metus non dictum. In odio libero, elementum sit amet mi vitae, iaculis tincidunt sem. Quisque eget auctor massa. Nunc pulvinar cursus eros vitae bibendum. Integer vitae pharetra nulla. Integer vitae iaculis ligula. Cras elementum neque magna, posuere semper leo iaculis nec. Curabitur vel neque ut massa efficitur luctus. In at enim sed est pulvinar rhoncus. Aliquam dictum venenatis interdum. Pellentesque accumsan imperdiet varius."
}}

"""

callback = CustomJS(args={'div_object': div}, code=new_code)

p.add_tools(HoverTool(tooltips=None, callback=callback, renderers=[cr]))


show(row(p,Spacer(width=20), div))

从bokeh.models导入ColumnDataSource、CustomJS、HoverTool、Div、Spacer
从bokeh.plotting导入图形，输出_文件，显示
fro