用于在 Bokeh 中获取选定字形索引的 JavaScript 回调

Question

我使用 Bokeh 创建了一个可视化图表，显示了我使用 Networkx 创建的网络。我现在想使用 TapTool 来显示与我单击的图表上的任何节点相关的信息。该图只是节点和边。我知道我应该能够在 JavaScript 回调函数中使用 var inds = cb_obj.selected['1d'].indices; 来获取被点击的节点(字形)的索引，但是这在某种程度上不起作用，我收到错误消息，Uncaught TypeError: Cannot read property '1d' of undefined。将不胜感激朝着正确方向的插入。

下面是我的代码。请注意，我将我的绘图定义为 Plot() 而不是 figure()。我认为这不是问题的原因，只是想提一下。此外，我正在使用 window.alert(inds); 只是为了查看我得到的值。这不是我的最终目的，但我希望这一点无论如何都能奏效。

def draw_graph_____(self, my_network):
    self.graph_height, self.graph_width, self.graph_nodes, self.graph_edges, self.node_coords, self.node_levels = self.compute_graph_layout(my_network)

    graph = nx.DiGraph()
    graph.add_nodes_from(self.graph_nodes)
    graph.add_edges_from(self.graph_edges)

    plot            = Plot(plot_width = self.graph_width, plot_height = self.graph_height, x_range = Range1d(0.0, 1.0), y_range = Range1d(0.0, 1.0))
    plot.title.text = "Graph Demonstration"

    graph_renderer = from_networkx(graph, self.graph_layout, scale = 1, center = (-100, 100))
    graph_renderer.node_renderer.data_source.data["node_names"] = self.graph_nodes
    graph_renderer.node_renderer.data_source.data["index"]      = self.graph_nodes

    graph_renderer.node_renderer.glyph              = Circle(size = 40, fill_color = Spectral4[0])
    graph_renderer.node_renderer.selection_glyph    = Circle(size = 40, fill_color = Spectral4[2])
    graph_renderer.node_renderer.hover_glyph        = Circle(size = 40, fill_color = Spectral4[1])

    graph_renderer.edge_renderer.glyph              = MultiLine(line_color = "#CCCCCC", line_alpha = 0.8, line_width = 5)
    graph_renderer.edge_renderer.selection_glyph    = MultiLine(line_color = Spectral4[2], line_width = 5)
    graph_renderer.edge_renderer.hover_glyph        = MultiLine(line_color = Spectral4[1], line_width = 5)

    graph_renderer.selection_policy     = NodesAndLinkedEdges()
    graph_renderer.inspection_policy    = NodesAndLinkedEdges()

    x_coord = [coord[0] for coord in self.node_coords]
    y_coord = [coord[1] for coord in self.node_coords]
    y_offset = []

    for level in self.node_levels:
        for item in self.node_levels[level]:
            if self.node_levels[level].index(item) % 2 == 0:
                y_offset.append(20)
            else:
                y_offset.append(-40)

    graph_renderer.node_renderer.data_source.data["x_coord"]    = x_coord
    graph_renderer.node_renderer.data_source.data["y_coord"]    = y_coord
    graph_renderer.node_renderer.data_source.data["y_offset"]   = y_offset

    labels_source   = graph_renderer.node_renderer.data_source
    labels          = LabelSet(x = "x_coord", y = "y_coord", text = 'node_names', text_font_size = "12pt", level = 'glyph',
                               x_offset = -50, y_offset = "y_offset", source = labels_source, render_mode = 'canvas')
    plot.add_layout(labels)

    callback = CustomJS(args = dict(source = graph_renderer.node_renderer.data_source), code =
    """
    console.log(cb_obj)
    var inds = cb_obj.selected['1d'].indices;
    window.alert(inds);
    """)

    plot.add_tools(HoverTool(tooltips = [("Node", "@node_names"), ("Recomm", "Will put a sample recommendation message here later")]))
    plot.add_tools(TapTool(callback = callback))

    plot.renderers.append(graph_renderer)

    output_file("interactive_graphs.html")

    show(plot)

顺便说一句，我的导入如下:

import collections
import networkx             as nx
import numpy                as np

from bokeh.io               import output_file, show
from bokeh.models           import Circle, ColumnDataSource, CustomJS, Div, HoverTool, LabelSet, MultiLine, OpenURL, Plot, Range1d, TapTool
from bokeh.models.graphs    import from_networkx, NodesAndLinkedEdges
from bokeh.palettes         import Spectral4

很抱歉没有发布完整的代码，但这需要进行相当多的更改才能制作虚拟数据并显示其他文件和函数(我应该有)，但我认为仅此一个函数就足以识别的问题。如果没有，我很乐意分享更多代码。谢谢!

Answer 1

问题是回调没有附加到数据源。 cb_obj 的值是触发回调的任何对象。但只有 ColumnDataSource 对象具有 selected 属性，因此只有数据源上的回调才会具有 cb_obj.selected。如果您希望在选择更改时触发回调，即无论何时单击节点，那么您都希望在数据源上进行回调。 [1]

但是，如果您希望在仅将鼠标悬停在节点上(但未单击)时进行回调，那是检查，而不是选择。您将要遵循此示例:

https://docs.bokeh.org/en/latest/docs/user_guide/interaction/callbacks.html#customjs-for-hover

虽然它不经常使用(因此没有很好地记录)悬停工具的回调会在 cb_data 参数中传递附加信息。此 cb_data 参数用作工具的包罗万象的机制，以便能够将工具特定的额外内容传递给回调。对于悬停工具，cb_data 是一个具有 .index 和 .geometry 属性的对象。所以 cb_data.index['1d'].indices 具有当前悬停的点的索引。 .geometry 属性作为有关执行的 HitTest 类型的信息(即是单个点？还是垂直或水平跨度？点或跨度的位置是什么？)

[1] 或者，tap 工具也可以传递一个专门的 cb_data，如上所述。它是一个具有 .source 属性的对象，它是进行选择的数据源。所以 cb_data.source.selected 应该可以工作。但实际上我从不使用它，因为对数据源的回调同样有效。