如何点击Bokeh渲染的NetworkX图边缘打开含对应数据的URL

这个问题的核心在于默认的TapTool会监听所有渲染器，而当你使用EdgesAndLinkedNodes选择策略时，点击边缘会同时选中关联节点，导致OpenURL优先使用了节点数据源的字段，而非边缘的。下面有两种可行的解决方法：

方法1：让TapTool仅作用于边缘渲染器 #

最简单的方式是给TapTool指定renderers参数，明确让它只响应边缘的点击事件，这样OpenURL就会从边缘的数据源中读取color和weight字段：

修改你的TapTool添加代码：

# 创建OpenURL回调，使用边缘的字段
open_url = OpenURL(url="http://localhost/@color/@weight")
# 创建TapTool，指定只监听边缘渲染器
tap_tool = TapTool(callback=open_url, renderers=[graph_renderer.edge_renderer])
plot.add_tools(HoverTool(tooltips=tooltips), tap_tool)

这样调整后，点击边缘时，OpenURL会正确使用该边缘的color和weight值填充URL模板，不会再读取节点的数据。

方法2：自定义JS回调（更灵活的方案） #

如果需要更多自定义逻辑，比如打开URL前做额外处理，可以用JS回调实现。核心思路是通过Bokeh的JS API获取点击的边缘数据，构造URL后在新标签页打开：

修改代码中的TapTool部分为：

from bokeh.models import CustomJS

# 自定义JS回调
tap_callback = CustomJS(args=dict(edge_source=graph_renderer.edge_renderer.data_source), code="""
    // 获取选中的边缘索引
    const selected_indices = edge_source.selected.indices;
    if (selected_indices.length > 0) {
        // 获取第一个选中的边缘数据（点击单个边缘只会选中一个）
        const edge_data = edge_source.data;
        const idx = selected_indices[0];
        const color = edge_data['color'][idx];
        const weight = edge_data['weight'][idx];
        // 构造URL并在新标签页打开
        const url = `http://localhost/${color}/${weight}`;
        window.open(url, '_blank');
    }
""")

# 创建TapTool，绑定自定义回调并指定作用于边缘渲染器
tap_tool = TapTool(callback=tap_callback, renderers=[graph_renderer.edge_renderer])
plot.add_tools(HoverTool(tooltips=tooltips), tap_tool)

关键说明 #

• 通过edge_source.selected.indices获取选中的边缘索引，点击单个边缘时只会返回一个索引值。
• 从边缘数据源的data属性中取出对应索引的color和weight字段，构造目标URL。
• 使用window.open(url, '_blank')实现和OpenURL一致的新标签页打开行为。

额外注意点 #

• 确保边缘数据源中确实存在color和weight字段（你的示例代码已经正确设置了这些属性）。
• 如果需要保留节点的点击行为，可以单独给节点渲染器添加另一个TapTool，分开处理节点和边缘的点击事件。

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