如何分离Matplotlib中的NetworkX图与按钮并避免图叠加？

问题根源 #

1. 图叠加：每次点击按钮调用nx.draw()时，未清除之前绘制的内容，导致新图直接叠加在旧图之上。
2. 图与按钮重叠：绘图时未指定专属轴，且未限制轴显示范围，图形会延伸到按钮所在的底部区域。

修复步骤 #

• 每次更新节点颜色前，先清除绘图轴的原有内容（ax.clear()）
• 调用nx.draw()时指定ax=ax，强制在预设的绘图轴上绘制
• 固定绘图轴的显示范围，避免图形超出指定区域
• 优化按钮位置与布局调整，确保按钮区域不被图形覆盖

修正后的代码 #

import matplotlib.pyplot as plt
import networkx as nx
from matplotlib.widgets import Button
from itertools import product

# 创建2D图并定义范围
N = 6
G = nx.Graph()

for i in range(1, (N*N)+1):
    G.add_node(i)

# 预定义节点位置，避免重复计算
node_pos = list(product(range(0, N), repeat=2))
pos = dict((i + 1 + (N - 1 - j) * N, (i,j)) for i,j in node_pos)

def update_node_colors(colors):
    ax.clear()  # 清除之前的绘图内容
    nx.draw(G, pos, with_labels=True, node_color=colors, ax=ax)  # 指定绘图轴
    ax.set_xlim(-0.5, N-0.5)  # 固定x轴范围，防止图形偏移
    ax.set_ylim(-0.5, N-0.5)  # 固定y轴范围，防止图形偏移
    plt.draw()

def prev_button(event):
    colors = ["yellow" for _ in G.nodes()]
    update_node_colors(colors)

def next_button(event):
    colors = ["red" for _ in G.nodes()]
    update_node_colors(colors)

fig, ax = plt.subplots(1, 1, figsize=(7,6))

# 初始绘图
nx.draw(G, pos, with_labels=True, ax=ax)
ax.set_xlim(-0.5, N-0.5)
ax.set_ylim(-0.5, N-0.5)

# 调整布局，给按钮留出足够空间
plt.subplots_adjust(bottom=0.2)

# 创建Prev按钮
ax_prev = plt.axes([0.7, 0.15, 0.2, 0.07])
button_prev = Button(ax_prev, "Prev", color="green", hovercolor="blue")
button_prev.on_clicked(prev_button)

# 创建Next按钮
ax_next = plt.axes([0.7, 0.05, 0.2, 0.07])
button_next = Button(ax_next, "Next", color="orange", hovercolor="red")
button_next.on_clicked(next_button)

plt.show()

关键修改说明 #

• 预计算节点位置：把pos的计算移到函数外，避免每次更新重复计算，提升运行效率
• 清除轴内容：ax.clear()确保每次更新都是全新绘制，彻底解决叠加问题
• 指定绘图轴：nx.draw(..., ax=ax)让图形始终在预设的轴上渲染，不会干扰按钮的独立轴
• 固定轴范围：set_xlim和set_ylim防止图形因重绘出现偏移，避免延伸到按钮区域
• 优化按钮位置：调整按钮的x坐标为0.7，让按钮更靠右，进一步避免与图形重叠

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