Bokeh中的网络图：当鼠标悬停在节点上时显示节点的连接

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的使用对我来说是个谜——尽管我在google上搜索了很多次，但我还没有找到一个清晰而全面的参考资料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)