我用PyGraphviz做了类似的事情，你可以将图形保存为SVG，并在你的网站上显示SVG，然后你可以用类似jQuery SVG的东西将处理程序附加到节点上。
我实现了一个更灵活的解决方案，将所有节点和边序列化为JSON格式并发送到网站，然后使用Raphaël绘制图形，该解决方案跨浏览器兼容，非常灵活。

退房也是django-netjsongraph。

我喜欢d3，这里有一个force-directed graph的例子（通常用于显示社交网络）。
在d3force示例中添加您所寻求的单击处理类型是相当容易的。

d3graph库将在python中构建一个强制定向d3图，你可以根据边的权重“断开”网络，并将鼠标悬停在节点上以获取更多信息，双击一个节点将聚焦于该节点及其连接的边。

pip install d3graph

示例：

# Import library
from d3graph import d3graph, vec2adjmat

source = ['node A','node F','node B','node B','node B','node A','node C','node Z']
target = ['node F','node B','node J','node F','node F','node M','node M','node A']
weight = [5.56, 0.5, 0.64, 0.23, 0.9,3.28,0.5,0.45]

# Convert to adjacency matrix
adjmat = vec2adjmat(source, target, weight=weight)

print(adjmat)
# target  node A  node B  node F  node J  node M  node C  node Z
# source                                                        
# node A    0.00     0.0    5.56    0.00    3.28     0.0     0.0
# node B    0.00     0.0    1.13    0.64    0.00     0.0     0.0
# node F    0.00     0.5    0.00    0.00    0.00     0.0     0.0
# node J    0.00     0.0    0.00    0.00    0.00     0.0     0.0
# node M    0.00     0.0    0.00    0.00    0.00     0.0     0.0
# node C    0.00     0.0    0.00    0.00    0.50     0.0     0.0
# node Z    0.45     0.0    0.00    0.00    0.00     0.0     0.0

# Initialize
d3 = d3graph()

# Process adjacency matrix
d3.graph(adjmat)
d3.show()

# Example B: Color nodes
d3.set_node_properties(color=adjmat.columns.values, size=size)
d3.show()

# Example C: include node size
size = [10,20,10,10,15,10,5]
d3.set_node_properties(color=adjmat.columns.values, size=size)
d3.show()

# Example D: include node-edge-size
d3.set_node_properties(color=adjmat.columns.values, size=size, edge_size=size[::-1], cmap='Set2')
d3.show()

# Example E: include node-edge color
d3.set_node_properties(color=adjmat.columns.values, size=size, edge_size=size[::-1], edge_color='#000000')
d3.show()

# Example F: Change colormap
d3.set_node_properties(color=adjmat.columns.values, size=size, edge_size=size[::-1], edge_color='#00FFFF', cmap='Set2')
d3.show()

# Example G: Include directed links. Arrows are set from source -> target
d3.set_edge_properties(directed=True)
d3.set_node_properties(color=adjmat.columns.values, size=size, edge_size=size, edge_color='#000FFF', cmap='Set1')
d3.show()

• 有关更多示例和信息，请访问github documentation pages。
• 泰坦尼克号的互动例子可以在here中找到。
• 如果你需要更多关于d3graph是如何开发的，请阅读blog here。