Python 如何打开包含Bokeh图单击边的相应数据的URL

我试图打开一个URL，其参数对应于用Bokeh呈现的networkx图形的边。我能够使用带有工具提示的鼠标悬停工具加载与我需要的URL匹配的图像，URL是一个模板，其中填充了图形边缘数据中的参数（“颜色”和“权重”）。以下是一个简化的示例：

import networkx as nx

from bokeh.io import show, output_file
from bokeh.models import Plot, Range1d, MultiLine, Circle, TapTool, OpenURL, HoverTool
from bokeh.models.graphs import from_networkx, EdgesAndLinkedNodes
from bokeh.palettes import Spectral4

tooltips = """
<div id="picture" style="width : 550px; position: fixed; left: 250px; top: 80px">
    <div>
        <img
            src="http://localhost/@color/@weight/" alt="http://localhost/@color/@weight/" height=300
            border="2"
        ></img>
    </div>
</div>
"""

G = nx.Graph()
G.add_node('X', color='color of node')
G.add_edge('Y', 'X', weight=6, color="blue")
G.add_edge('Z', 'X', weight=3, color="yellow")
G.add_edge('Y', 'Z', weight=7, color="red")

plot = Plot(plot_width=800, plot_height=800,
            x_range=Range1d(-1.1,1.1), y_range=Range1d(-1.1,1.1))

graph_renderer = from_networkx(G, nx.circular_layout, scale=1, center=(0,0))
graph_renderer.node_renderer.glyph = Circle(size=15, fill_color=Spectral4[0])
graph_renderer.node_renderer.selection_glyph = Circle(size=15, fill_color=Spectral4[2])
graph_renderer.node_renderer.hover_glyph = Circle(size=15, fill_color=Spectral4[1])
graph_renderer.edge_renderer.glyph = MultiLine(line_color="#CCCCCC", line_alpha=0.8, line_width=5)
graph_renderer.edge_renderer.selection_glyph = MultiLine(line_color=Spectral4[2], line_width=5)
graph_renderer.edge_renderer.hover_glyph = MultiLine(line_color=Spectral4[1], line_width=5)
graph_renderer.selection_policy = EdgesAndLinkedNodes()
graph_renderer.inspection_policy = EdgesAndLinkedNodes()

plot.renderers.append(graph_renderer)

url = "http://localhost/@color/@weight/@index"
plot.add_tools(HoverTool(tooltips=tooltips), TapTool(callback=OpenURL(url=url)))

output_file("example.html")

show(plot)

将networkx导入为nx
从bokeh.io导入显示，输出_文件
从bokeh.models导入Plot、Range1d、多行、圆、TapTool、OpenURL、HoverTool
从bokeh.models.graphs从_networkx、EdgesAndLinkedNodes导入
从bokeh.palets导入光谱4
工具提示=“”
"""
G=nx.Graph（）
G.add_节点（'X'，color='node'的颜色〕）
G.添加边缘（'Y'，'X'，重量=6，颜色=“蓝色”）
G.添加边缘（“Z”，“X”，重量=3，颜色=“黄色”）
G.添加边缘（“Y”，“Z”，重量=7，颜色=“红色”）
绘图=绘图（绘图宽度=800，绘图高度=800，
x_范围=范围1D（-1.1,1.1），y_范围=范围1D（-1.1,1.1））
图形渲染器=来自网络x（G，nx.circular\u布局，比例=1，中心=（0,0））
graph_renderer.node_renderer.glyph=圆（大小=15，填充颜色=Spectral4[0]）
graph_renderer.node_renderer.selection_glyph=圆（大小=15，填充颜色=Spectral4[2]）
graph_renderer.node_renderer.hover_glyph=圆形（大小=15，填充颜色=Spectral4[1]）
graph_renderer.edge_renderer.glyph=多行（line_color=“#CCCCCC”，line_alpha=0.8，line_width=5）
graph_renderer.edge_renderer.selection_glyph=多行（线条颜色=光谱4[2]，线条宽度=5）
graph_renderer.edge_renderer.hover_glyph=多行（线条颜色=光谱4[1]，线条宽度=5）
graph_renderer.selection_policy=EdgesAndLinkedNodes（）
graph_renderer.inspection_policy=EdgesAndLinkedNodes（）
plot.renders.append（图形渲染器）
url=”http://localhost/@颜色/@重量/@索引“
plot.add_工具（HoverTool（工具提示=工具提示），TapTool（callback=OpenURL（url=url）））
输出文件（“example.html”）
显示（绘图）

例如，将鼠标悬停在边上时，工具提示中加载的图像是：

现在，我的目标是在单击边缘时在新选项卡中打开此URL。我正在使用带有OpenURL回调的TapTool。这一次，url模板填充了来自最近的节点的信息，而不是来自边缘的信息。例如，它尝试打开：

有没有一种方法可以像我希望的那样使用OpenURL

---

我猜我的一个选择是在TapTool中创建一个自定义JS回调，而不是使用OpenURL。我能够得到我点击的字形的x和y位置，但我不知道如何从点击的边缘检索数据信息，以构建包含“颜色”和“重量”数据的URL。有什么办法可以做到这一点吗

您可以将url传递给JS回调，并使用下面示例中的

open（）

方法打开它。点击一个节点将把回调对象、回调数据、回调数据和其他信息打印到开发者工具控制台，例如Google Chrome中。还将打印选定的索引和相应的数据值。请注意，在执行JS回调之前，将首先应用您的

graph\u renderer.selection\u策略。我希望有帮助

import networkx as nx

from bokeh.io import show, output_file
from bokeh.models import Plot, Range1d, MultiLine, Circle, TapTool, OpenURL, HoverTool, CustomJS
from bokeh.models.graphs import from_networkx, EdgesAndLinkedNodes
from bokeh.palettes import Spectral4

tooltips = """
<div id="picture" style="width : 550px; position: fixed; left: 250px; top: 80px">
    <div>
        <img
            src="http://localhost/@color/@weight/" alt="http://localhost/@color/@weight/" height=300
            border="2"
        ></img>
    </div>
</div> """

G = nx.Graph()
G.add_node('X', color = 'color of node')
G.add_edge('Y', 'X', weight = 6, color = "blue")
G.add_edge('Z', 'X', weight = 3, color = "yellow")
G.add_edge('Y', 'Z', weight = 7, color = "red")

plot = Plot(x_range = Range1d(-1.1, 1.1), y_range = Range1d(-1.1, 1.1))

graph_renderer = from_networkx(G, nx.circular_layout, scale = 1, center = (0, 0))
graph_renderer.node_renderer.glyph = Circle(size = 15, fill_color = Spectral4[0])
graph_renderer.node_renderer.selection_glyph = Circle(size = 15, fill_color = Spectral4[2])
graph_renderer.node_renderer.hover_glyph = Circle(size = 15, fill_color = Spectral4[1])
graph_renderer.edge_renderer.glyph = MultiLine(line_color = "#CCCCCC", line_alpha = 0.8, line_width = 5)
graph_renderer.edge_renderer.selection_glyph = MultiLine(line_color = Spectral4[2], line_width = 5)
graph_renderer.edge_renderer.hover_glyph = MultiLine(line_color = Spectral4[1], line_width = 5)
graph_renderer.selection_policy = EdgesAndLinkedNodes()
graph_renderer.inspection_policy = EdgesAndLinkedNodes()

plot.renderers.append(graph_renderer)

url = "http://localhost/@color/@weight/@index"
code = ''' 
//open(url);
console.log(cb_obj); 
console.log(cb_data); 
console.log(cb_data.source.selected.indices);
console.log(cb_data.source.data);
selected = cb_data.source.selected.indices
if (selected.length > 0)
    for (index in selected)
        console.log('index: ' + selected[index] + ', value: ' + cb_data.source.data.index[selected[index]])
console.log(''); '''
callback_tap_tool = CustomJS(args = dict(url = url), code = code)
plot.add_tools(HoverTool(tooltips = tooltips), TapTool(callback = callback_tap_tool))

output_file("example.html")

show(plot)

将networkx导入为nx
从bokeh.io导入显示，输出_文件
从bokeh.models导入Plot、Range1d、MultiLine、Circle、TapTool、OpenURL、HoverTool、CustomJS
从bokeh.models.graphs从_networkx、EdgesAndLinkedNodes导入
从bokeh.palets导入光谱4
工具提示=“”
"""
G=nx.Graph（）
G.add_节点（'X'，color='color of node'）
G.添加边缘（'Y'，'X'，重量=6，颜色=“蓝色”）
G.添加边缘（“Z”，“X”，重量=3，颜色=“黄色”）
G.添加边缘（“Y”，“Z”，重量=7，颜色=“红色”）
绘图=绘图（x_范围=范围1D（-1.1,1.1），y_范围=范围1D（-1.1,1.1））
图形渲染器=来自网络x（G，nx.circular\u布局，比例=1，中心=（0，0））
graph_renderer.node_renderer.glyph=圆（大小=15，填充颜色=Spectral4[0]）
graph_renderer.node_renderer.selection_glyph=圆（大小=15，填充颜色=Spectral4[2]）
graph_renderer.node_renderer.hover_glyph=圆形（大小=15，填充颜色=Spectral4[1]）
graph_renderer.edge_renderer.glyph=多行（line_color=“#CCCCCC”，line_alpha=0.8，line_width=5）
graph_renderer.edge_renderer.selection_glyph=多行（线条颜色=光谱4[2]，线条宽度=5）
graph_renderer.edge_renderer.hover_glyph=多行（线条颜色=光谱4[1]，线条宽度=5）
graph_renderer.selection_policy=EdgesAndLinkedNodes（）
graph_renderer.inspection_policy=EdgesAndLinkedNodes（）
plot.renders.append（图形渲染器）
url=”http://localhost/@颜色/@重量/@索引“
代码=“”
//打开（url）；
控制台日志（cb_obj）；
控制台日志（cb_数据）；
log（cb_data.source.selected.index）；
日志（cb_data.source.data）；
selected=cb_data.source.selected.index
如果（已选定。长度>0）
用于（选定的索引）
console.log（'index:'+selected[index]+'，值：'+cbu data.source.data.index[selected[index]]））
控制台日志（“”）；“”
callback\u tap\u tool=CustomJS（args=dict（url=url），code=code）
plot.add_工具（HoverTool（工具提示=工具提示），TapTool（callback=callback_tap_工具））
输出文件（“example.html”）
显示（绘图）