Bokeh网络图源节点与目标节点如何设置不同HoverTool悬浮提示

原有代码问题 #

• 属性名使用空格命名（name hover、target hover），Bokeh 无法正常识别该类字段
• 两个悬浮工具都绑定了全量图形渲染器，所有节点都会触发两个悬浮提示，无法区分节点类型
• 缺少Range1d、HoverTool的依赖导入，样例DataFrame存在语法错误

修正后完整可运行代码 #

import pandas as pd
from bokeh.io import show
import networkx as nx
from bokeh.models import Plot, MultiLine, Circle, Range1d, HoverTool, CustomJS
from bokeh.models.graphs import from_networkx

# 修正样例df的语法错误
df = pd.DataFrame({
    'source': [1,2,3],
    'target': ['a', 'b', 'c'],
    'name': ['a1', 'b2', 'c3']
})

net_graph = nx.from_pandas_edgelist(df, 'source', 'target', 'name')
# 给节点打类型标记、设置悬浮属性
for index, row in df.iterrows():
    # 源节点属性配置
    net_graph.nodes[row['source']]['node_type'] = 'source'
    net_graph.nodes[row['source']]['source_hover'] = row['source']
    net_graph.nodes[row['source']]['name_hover'] = row['name']
    # 目标节点属性配置
    net_graph.nodes[row['target']]['node_type'] = 'target'
    net_graph.nodes[row['target']]['target_hover'] = row['target']

graph_plot = Plot(plot_width = 800, plot_height = 600, x_range = Range1d(-1.1, 1.1), y_range = Range1d(-1.1, 1.1))
graph_setup = from_networkx(net_graph, nx.spring_layout, scale = 1, center = (0, 0))

# 源节点专属悬浮工具
source_hover = HoverTool(
    tooltips = [("SOURCE", "@source_hover"), ("NAME", "@name_hover")],
    mode = 'node',
    # 节点类型过滤逻辑
    callback = CustomJS(args=dict(hover=source_hover), code="""
        const node_data = cb_data.renderer.node_renderer.data_source.data;
        const index = cb_data.index.indices[0];
        hover.tooltips = node_data.node_type[index] === 'source' ? [["SOURCE", "@source_hover"], ["NAME", "@name_hover"]] : [];
    """)
)

# 目标节点专属悬浮工具
target_hover = HoverTool(
    tooltips = [("TARGET", "@target_hover")],
    mode = 'node',
    callback = CustomJS(args=dict(hover=target_hover), code="""
        const node_data = cb_data.renderer.node_renderer.data_source.data;
        const index = cb_data.index.indices[0];
        hover.tooltips = node_data.node_type[index] === 'target' ? [["TARGET", "@target_hover"]] : [];
    """)
)

graph_plot.add_tools(source_hover, target_hover)

graph_setup.node_renderer.glyph = Circle(size = 20, fill_color = 'red')
graph_setup.edge_renderer.glyph = MultiLine(line_color = "grey", line_alpha = 0.8, line_width = 1)
graph_plot.renderers.append(graph_setup)

show(graph_plot)

改动说明 #

• 统一节点属性命名为下划线格式，避免解析错误
• 新增node_type字段标记节点类别，作为悬浮触发的判断依据
• 两个悬浮工具新增了JS回调逻辑，触发悬浮时先判断当前节点类型，不符合则隐藏悬浮提示，符合则显示对应内容
• 修复了依赖导入、样例数据的语法错误

内容的提问来源于stack exchange，提问作者Liselotte