python - Bokeh 中的网络图形 : displaying a node's connections when hovering over the node

Question

我正在使用 Bokeh 创建 NetworkX 图的交互式可视化。我想要做的是，当我将鼠标悬停在特定节点上时，显示连接到该节点的所有边。

在 Bokeh 用户指南中有一个 example这或多或少满足了我的要求，但我对这个解决方案不满意，原因有二:

1. 线段是在每个悬停事件上新绘制的，这意味着它们显示在节点圆上，这看起来很难看。 (这在示例中并不明显，因为线和节点的颜色相同)。
2. 我的图是加权的，边的宽度取决于它的权重。没有办法(据我所知)使突出显示的边缘达到正确的宽度。

因此，我尝试了另一种方法:从头开始绘制所有边，但将它们的 visible 属性设置为 False。然后创建一个字典，其中节点索引作为键，连接到该节点的边列表作为值。当鼠标悬停在节点上时，该节点的边缘应该将其 visible 属性更改为 True。它看起来或多或少像这样:

global glob_edges_by_node_index

edges_by_node = {}

for edge in G.edges(data=True): # create the segments (G is a preexisting NetworkX graph)
    u,v,d = edge
    x_0 = pos[u][0] # pos is a preexisting dictionary of x and y values for each node
    y_0 = pos[u][1]
    x_1 = pos[v][0]
    y_1 = pos[v][1]
    width = 0.03*d['weight']
    highlit_edge = p.segment(x0=[x_0],x1=[x_1],y0=[y_0],y1=[y_1],color='#379bdd',line_width=width) # p is a preexisting Bokeh figure
    highlit_edge.visible = False # all segments are invisible at the start
    edges_by_node[u].append(highlit_edge) # put the segment into both nodes' dictionary entries
    edges_by_node[v].append(highlit_edge)


id_to_index = {}
edges_by_node_index = {}
i = 0

for node_id in G.nodes(): # convert the dict keys from their original IDs to the indices seen by Bokeh
    id_to_index[node_id] = i
    edges_by_node_index[i] = edges_by_node[node_id]
    i = i + 1

global glob_edges_by_node_index = edges_by_node_index

nodesource = ColumnDataSource(data=dict(x=x,y=y,sizes=nodesizes,colours=nodecolours)) # refers to preexisting data about the nodes
cr = p.circle('x','y',color='colours',alpha=0.7,hover_color='colours',hover_alpha=1.0,size='sizes',line_width=1,line_color='#000000',hover_line_color='#000000',source=nodesource) # draw the nodes themselves

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

def on_hover(window=None):

    indices = cb_data['index']
    for ind in indices:
        highlit_edges = glob_edges_by_node_index[ind]
        for highlit_edge in highlit_edges:
            highlit_edge.visible = True # set edges to visible if they're in the dict entry of the hovered-over node

这行不通，我对如何修复它有点困惑。尤其是 cb_data 的使用对我来说是个谜——尽管进行了大量的谷歌搜索，但我仍无法找到关于 cb_data 包含哪些信息、在哪些方面的清晰全面的引用格式，以及如何访问它。任何帮助将不胜感激!

Answer 1

您可以添加悬停工具以在悬停时突出显示连接的边缘，还可以将默认线 alpha 设置为零:

import networkx as nx

from bokeh.models import Range1d, MultiLine, Circle, HoverTool
from bokeh.models.graphs import from_networkx, EdgesAndLinkedNodes
from bokeh.plotting import figure, show

G=nx.karate_club_graph()

plot = figure(plot_width=400, plot_height=400,
            x_range=Range1d(-1.1,1.1), y_range=Range1d(-1.1,1.1))
plot.add_tools(HoverTool(tooltips=None))

r = from_networkx(G, nx.circular_layout, scale=1, center=(0,0))

r.node_renderer.glyph = Circle(size=15, fill_color='#2b83ba')
r.node_renderer.hover_glyph = Circle(size=15, fill_color='#abdda4')

r.edge_renderer.glyph = MultiLine(line_alpha=0, line_width=5)  # zero line alpha
r.edge_renderer.hover_glyph = MultiLine(line_color='#abdda4', line_width=5)

r.inspection_policy = EdgesAndLinkedNodes()
plot.renderers.append(r)

show(plot)