JavaScript回调以获取Bokeh中的选定字形索引

2019-10-06 08:34:57 阅读：415 来源： 互联网

我使用Bokeh创建了一个可视化图形,显示了我使用Networkx创建的网络.我现在想使用TapTool显示与我点击的图表上的任何节点相关的信息.图表只是节点和边缘.我知道我应该可以使用var inds = cb_obj.selected [‘1d’].在JavaScript回调函数中获取被点击的节点(字形)的索引,但是这不能正常工作,我得到错误消息,Uncaught TypeError：无法读取未定义的属性“1d”.我们将非常感谢正确方向的推动.

以下是我的代码.请注意,我已将我的情节定义为Plot()而不是数字().我不认为这是问题的原因,但只是想提一下.另外,我正在使用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

我很抱歉没有发布整个代码,但这需要进行一些更改来制作虚拟数据并显示其他文件和功能(我应该有),但我认为这一个功能可能足以识别问题.如果没有,我很乐意分享更多代码.谢谢！

解决方法:

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

但是,如果您希望在节点仅仅悬停(但未单击)时进行回调,那么这是一次检查,而不是选择.您将要关注此示例：

https://bokeh.pydata.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属性作为有关所执行的命中测试类型的信息(即,是单点？还是垂直或水平跨度？点或跨度的位置是什么？)

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

标签：javascript,bokeh
来源： https://codeday.me/bug/20191006/1859649.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript回调以获取Bokeh中的选定字形索引