Matplotlib（非pyplot）：动态数据致布局混乱的解决方案咨询

背景与当前代码 #

我想要实现特定的四象限布局，已通过以下Python代码完成基础绘制（Web应用不推荐使用pyplot，因此采用Figure对象实现）：

from matplotlib.figure import Figure
import matplotlib.patches as mpatches
from matplotlib.lines import Line2D
from io import BytesIO
import base64

def create_bcs_plot(x_data: tuple = tuple(), y_data: tuple = tuple()):
    # initialize figure
    fig = Figure(figsize=(7, 6))
    axs = fig.subplots()
    minx, maxx, midx = 0, 1, 0.5
    miny, maxy, midy = 0, 1, 0.5
    offsetx, offsety = 0.1, 0.1
    axs.add_patch(mpatches.Rectangle((minx, maxy), maxx, offsety, fill=False, edgecolor="black", clip_on=False, lw=0.5))
    axs.add_patch(mpatches.Rectangle((maxx, miny), offsetx, maxy, fill=False, edgecolor="black", clip_on=False, lw=0.5))

    # colored boxes inside plot
    axs.add_patch(mpatches.Rectangle((minx, midy), midx, midy, alpha=0.1, facecolor="green"))
    axs.add_patch(mpatches.Rectangle((midx, midy), midx, midy, alpha=0.1, facecolor="yellow"))
    axs.add_patch(mpatches.Rectangle((minx, miny), midx, midy, alpha=0.1, facecolor="gray"))
    axs.add_patch(mpatches.Rectangle((midx, miny), midx, midy, alpha=0.1, facecolor="red"))

    # crossed lines that separate the four classes
    axs.add_line(Line2D(xdata=(minx, maxx + offsetx), ydata=(midy, midy), clip_on=False, color="black", lw=0.5))
    axs.add_line(Line2D(xdata=(midx, midx), ydata=(miny, maxy + offsety), clip_on=False, color="black", lw=0.5))

    # y-axis HIGH, LOW labeling
    axs.text(maxx + 0.5 * offsetx, 0.25 * maxy, "LOW", fontdict={}, rotation="vertical", va="center", ha="center")
    axs.text(maxx + 0.5 * offsetx, 0.75 * maxy, "HIGH", fontdict={}, rotation="vertical", va="center", ha="center")

    # x-axis HIGH, LOW labeling
    axs.text(0.25 * maxx, maxy + 0.5 * offsety, "HIGH", fontdict={}, va="center", ha="center")
    axs.text(0.75 * maxx, maxy + 0.5 * offsety, "LOW", fontdict={}, va="center", ha="center")

    # populate with dynamic datapoints
    # x_data, y_data = (5, 255, 2000), (0.2, 1.1, 95)
    # axs.scatter(x_data, y_data)

    buf = BytesIO()
    fig.savefig(buf, format="png")
    data = base64.b64encode(buf.getbuffer()).decode("ascii")

    return f"<img src='data:image/png;base64,{data}'/>"

遇到的问题 #

取消注释添加动态数据后，整个绘图布局完全混乱；同时需要将两个坐标轴设置为对数刻度。

需求（二选一即可） #

• A）如何为位于绘图区域外部的矩形添加动态缩放适配？
• B）如何将矩形与坐标轴缩放分离，使其位置固定？

另外我考虑过隐藏当前绘图的轴刻度标签，添加新层来显示散点数据和正确的轴刻度标签，该方案是否可行？或有其他解决办法？

解决方案 #

核心问题分析 #

当前代码中所有图形元素（矩形、线条、文本）都是基于数据坐标绘制的，当添加动态数据后，坐标轴范围（尤其是对数轴的范围）会自动调整，导致这些元素的位置完全偏离预期。

优先方案：固定元素位置（需求B） #

使用Matplotlib的**轴归一化坐标（Axes坐标）**来绘制所有布局元素，该坐标系统以轴的左下角为(0,0)、右上角为(1,1)，与数据坐标完全解耦，不管轴怎么缩放，元素都会固定在轴的相对位置上。

修改后的代码如下：

from matplotlib.figure import Figure
import matplotlib.patches as mpatches
from matplotlib.lines import Line2D
from io import BytesIO
import base64

def create_bcs_plot(x_data: tuple = tuple(), y_data: tuple = tuple()):
    fig = Figure(figsize=(7, 6))
    axs = fig.subplots()
    # 轴归一化坐标的范围：0-1，对应轴的左下到右上
    minx, maxx, midx = 0, 1, 0.5
    miny, maxy, midy = 0, 1, 0.5
    offsetx, offsety = 0.1, 0.1

    # 外部的边框：使用轴坐标+画布坐标混合定位，避免受轴缩放影响
    # 顶部边框：从轴左边缘到右边缘，延伸到画布上方
    axs.add_patch(mpatches.Rectangle(
        (minx, maxy), maxx, offsety, 
        fill=False, edgecolor="black", clip_on=False, lw=0.5,
        transform=axs.transAxes  # 核心：使用轴归一化坐标
    ))
    # 右侧边框：从轴下边缘到上边缘，延伸到画布右侧
    axs.add_patch(mpatches.Rectangle(
        (maxx, miny), offsetx, maxy, 
        fill=False, edgecolor="black", clip_on=False, lw=0.5,
        transform=axs.transAxes
    ))

    # 内部四色矩形：完全用轴坐标定位，固定在轴的四个象限
    axs.add_patch(mpatches.Rectangle(
        (minx, midy), midx, midy, alpha=0.1, facecolor="green",
        transform=axs.transAxes
    ))
    axs.add_patch(mpatches.Rectangle(
        (midx, midy), midx, midy, alpha=0.1, facecolor="yellow",
        transform=axs.transAxes
    ))
    axs.add_patch(mpatches.Rectangle(
        (minx, miny), midx, midy, alpha=0.1, facecolor="gray",
        transform=axs.transAxes
    ))
    axs.add_patch(mpatches.Rectangle(
        (midx, miny), midx, midy, alpha=0.1, facecolor="red",
        transform=axs.transAxes
    ))

    # 分隔线：使用轴坐标，延伸到外部边框
    axs.add_line(Line2D(
        xdata=(minx, maxx + offsetx/axs.get_window_extent().width), 
        ydata=(midy, midy), clip_on=False, color="black", lw=0.5,
        transform=axs.transAxes
    ))
    axs.add_line(Line2D(
        xdata=(midx, midx), 
        ydata=(miny, maxy + offsety/axs.get_window_extent().height), 
        clip_on=False, color="black", lw=0.5,
        transform=axs.transAxes
    ))

    # 外部标签：用轴坐标+偏移定位，固定在外部边框位置
    axs.text(
        maxx + 0.5 * offsetx, 0.25 * maxy, "LOW", 
        rotation="vertical", va="center", ha="center",
        transform=axs.transAxes
    )
    axs.text(
        maxx + 0.5 * offsetx, 0.75 * maxy, "HIGH", 
        rotation="vertical", va="center", ha="center",
        transform=axs.transAxes
    )
    axs.text(
        0.25 * maxx, maxy + 0.5 * offsety, "HIGH", 
        va="center", ha="center",
        transform=axs.transAxes
    )
    axs.text(
        0.75 * maxx, maxy + 0.5 * offsety, "LOW", 
        va="center", ha="center",
        transform=axs.transAxes
    )

    # 添加动态数据并设置对数轴
    if x_data and y_data:
        axs.scatter(x_data, y_data)
        axs.set_xscale('log')
        axs.set_yscale('log')
        # 可选：手动设置轴范围，避免数据极端值导致布局失衡
        # axs.set_xlim(min(x_data)*0.8, max(x_data)*1.2)
        # axs.set_ylim(min(y_data)*0.8, max(y_data)*1.2)

    buf = BytesIO()
    fig.savefig(buf, format="png")
    data = base64.b64encode(buf.getbuffer()).decode("ascii")

    return f"<img src='data:image/png;base64,{data}'/>"

关键修改说明 #

1. 给所有布局元素添加transform=axs.transAxes参数，强制使用轴归一化坐标
2. 外部分隔线的偏移量做了适配，避免因画布尺寸导致的错位
3. 添加了对数轴设置，并保留了动态数据的绘制逻辑

关于双轴方案的可行性 #

你考虑的“隐藏原轴刻度、添加新层显示数据”方案是可行的，但属于冗余操作——直接用轴归一化坐标就能实现固定布局，不需要额外创建轴层，代码更简洁易维护。

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