如何为NetworkX图中的节点添加鼠标悬停描述？

我用NetworkX构建技能树时，因为技能描述内容过长无法永久展示，需要实现鼠标悬停节点时显示对应描述的功能。现有核心代码如下：

import networkx as nx
import matplotlib.pyplot as plt
import mpld3
from mpld3 import plugins

G = nx.Graph()

G.add_node('A', name='Node A', description='This is node A')
G.add_node('B', name='Node B', description='This is node B')

G.add_edge('A', 'B')

pos = nx.kamada_kawai_layout(G)

col_a='#000000'
col_b='#111111'
colours={'A':col_a, 'B':col_b}

fig, ax = plt.subplots(figsize=(20, 20))
# 修正原代码变量名错误：colors改为colours
nx.draw(G, pos, node_color=[colours[node] for node in G.nodes()], with_labels=False, node_size=2700)

node_labels = nx.get_node_attributes(G, 'name')
nx.draw_networkx_labels(G, pos, labels=node_labels, font_size=9)

ax.set_facecolor("#666666")

之前拿到的插件代码无法实现功能，以下是修复后的完整方案：

修复后的悬停插件代码 #

class NodeTooltip(plugins.PluginBase):
    JAVASCRIPT = """
    mpld3.register_plugin("node_tooltip", NodeTooltip);
    NodeTooltip.prototype = Object.create(mpld3.Plugin.prototype);
    NodeTooltip.prototype.constructor = NodeTooltip;
    function NodeTooltip(fig, props){
        mpld3.Plugin.call(this, fig, props);
    };

    NodeTooltip.prototype.draw = function(){
        var tooltips = this.props.tooltips;
        
        // 筛选出图中的节点路径元素
        var nodePaths = this.fig.axes[0].elements.filter(function(el) {
            return el.type === "path" && el.d.startsWith("M");
        });
        
        // 为每个节点绑定对应的描述tooltip
        nodePaths.forEach(function(path, index) {
            mpld3.add_tooltip(path, tooltips[index], null);
        });
    }
    """

    def __init__(self, tooltips):
        self.tooltips = tooltips

    def get_dict(self):
        return {
            'type': 'node_tooltip',
            'tooltips': self.tooltips
        }

绑定插件并保存HTML #

在绘制完节点和标签后添加以下代码：

# 按节点顺序获取所有描述
node_descriptions = [G.nodes[node]['description'] for node in G.nodes()]
# 连接插件到图表
plugins.connect(fig, NodeTooltip(node_descriptions))

# 保存为可交互的HTML文件
mpld3.save_html(fig, "Skill tree.html")

关键修复说明 #

1. 修正变量名错误：原代码中colors应为定义好的colours，否则会触发变量未定义报错
2. 精准绑定节点与描述：JS部分筛选出节点对应的路径元素，确保每个节点匹配对应的描述文本
3. 正确使用mpld3 tooltip API：用mpld3.add_tooltip将描述绑定到每个节点，实现鼠标悬停触发显示

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