如何为画布外的散景图生成动态描述文本？

Question

我有一个带有多个字形的散景图和一个 JavaScript 回调函数，该函数根据鼠标在图中悬停的位置混合其他字形。

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

如何为画布外的散景图生成动态变化的描述文本？

我的想法是编写一个 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))

Answer 1

我想到了：from bokeh.models import ColumnDataSource, CustomJS, HoverTool, Div, Spacerfrom bokeh.plotting import figure, output_file, showfrom bokeh.layouts import rowoutput_file("hover_callback.html")# define some points and a little graph between themx = [2, 3, 5, 6, 8, 7]y = [6, 4, 3, 8, 7, 5]links = {&nbsp; &nbsp; 0: [1, 2],&nbsp; &nbsp; 1: [0, 3, 4],&nbsp; &nbsp; 2: [0, 5],&nbsp; &nbsp; 3: [1, 4],&nbsp; &nbsp; 4: [1, 3],&nbsp; &nbsp; 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 circlecode = """const links = %sconst data = {'x0': [], 'y0': [], 'x1': [], 'y1': []}const indices = cb_data.index.indicesconsole.log(cb_data.index.indices)for (var i = 0; i < indices.length; i++) {&nbsp; &nbsp; const start = indices[i]&nbsp; &nbsp; for (var j = 0; j < links[start].length; j++) {&nbsp; &nbsp; &nbsp; &nbsp; const end = links[start][j]&nbsp; &nbsp; &nbsp; &nbsp; data['x0'].push(circle.data.x[start])&nbsp; &nbsp; &nbsp; &nbsp; data['y0'].push(circle.data.y[start])&nbsp; &nbsp; &nbsp; &nbsp; data['x1'].push(circle.data.x[end])&nbsp; &nbsp; &nbsp; &nbsp; data['y1'].push(circle.data.y[end])&nbsp; &nbsp; }}segment.data = data""" % linkscallback = 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.indicesconsole.log(indices)if (indices == undefined || indices.length == 0){{&nbsp; &nbsp; div_object.text = ""}}else {{&nbsp; &nbsp; 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))

Answer 2

简而言之，您可以使用该Div模型并将其text属性更改为您想要的任何属性。