如何在Bokeh网络图中获取点击节点数据并传递给CustomJS回调

你之前监听全局tap事件只能拿到鼠标坐标，是因为全局事件没有绑定到图元的选中逻辑，直接监听节点数据源的选中索引变化是最稳定的方案，修改代码如下：

# 直接创建点击节点的CustomJS回调
tap_callback = CustomJS(
    args=dict(node_source=graph.node_renderer.data_source),
    code="""
        // 获取当前被选中的节点索引，点击节点时会自动更新
        const selected_indices = node_source.selected.indices;
        if (selected_indices.length > 0) {
            // 取首个被选中的节点，多选场景可遍历该数组
            const idx = selected_indices[0];
            // 按需取出节点的所有自定义字段
            const node_degree = node_source.data['degree'][idx];
            const node_type = node_source.data['type'][idx];
            const node_aka = node_source.data['aka'][idx];
            // 弹出信息框
            alert(`节点信息：\n别名：${node_aka}\n类型：${node_type}\n度数：${node_degree}`);
        }
    """
)

# 将回调绑定到节点数据源的选中索引变化事件，避免点击空白区域触发回调
graph.node_renderer.data_source.selected.js_on_change('indices', tap_callback)

# 原有show逻辑不变
show(plot)

注意事项 #

• 所有你之前存入graph.node_renderer.data_source.data的自定义字段，都可以通过选中索引直接获取对应节点的取值
• 如果需要支持多选节点，遍历selected_indices数组批量处理即可
• 该方案和你已配置的NodesAndLinkedEdges选中策略完全兼容，不需要修改原有配置

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