如何将带分面的px.imshow图正确添加至FigureWidget并更新数据

当使用Plotly Express的imshow函数并设置facet_col参数时，返回的Figure会包含多个trace，想要将该图正确添加至go.FigureWidget对象并后续更新数据，但运行代码时抛出以下异常：

Exception: In order to reference traces by row and column, you must first use plotly.tools.make_subplots to create the figure with a subplot grid.

用户尝试的代码如下：

import numpy as np
import plotly.graph_objects as go
import plotly.express as px
from plotly.subplots import make_subplots

imgs = np.array([[[0]],[[0]],[[0]]])
rows = [1,1,1]
row_list = [1,1,1]
col_list = [1,1,1]

px_fig = px.imshow(
        imgs[:, :, :],
        binary_string=False,
        zmin=0,
        zmax=1,
        facet_col=0,
        aspect="auto",
        facet_col_wrap=20,
        facet_row_spacing=0.02,
        facet_col_spacing=0.005,
        color_continuous_scale='jet',
    )

o_samplesviz = go.FigureWidget()
subplots = make_subplots(rows=len(rows), cols=len(col_list))
subplots.add_traces(data=px_fig.data, rows=row_list, cols=col_list)
o_samplesviz.add_traces(subplots.data, rows=row_list, cols=col_list)

问题根源 #

go.FigureWidget()默认没有子图网格结构，直接调用add_traces并指定rows/cols参数时，因为缺少网格布局支持而报错。只有通过make_subplots创建的图才具备按行列引用trace的能力。

解决方案 #

直接基于make_subplots创建带网格的FigureWidget，复用px.imshow生成的trace属性，后续通过trace索引直接更新数据。完整代码示例如下：

import numpy as np
import plotly.graph_objects as go
import plotly.express as px
from plotly.subplots import make_subplots

# 示例数据
imgs = np.array([[[0]], [[0.5]], [[1]]])
num_rows = 1
num_cols = 3  # 根据数据量和facet布局调整

# 1. 创建带子图网格的FigureWidget
o_samplesviz = go.FigureWidget(make_subplots(rows=num_rows, cols=num_cols))

# 2. 用px.imshow生成基础图，获取样式和数据属性
px_fig = px.imshow(
    imgs[:, :, :],
    binary_string=False,
    zmin=0,
    zmax=1,
    facet_col=0,
    aspect="auto",
    facet_col_wrap=20,
    facet_row_spacing=0.02,
    facet_col_spacing=0.005,
    color_continuous_scale='jet',
)

# 3. 将每个trace添加到FigureWidget的对应子图位置
for idx, trace in enumerate(px_fig.data):
    row = (idx // num_cols) + 1
    col = (idx % num_cols) + 1
    o_samplesviz.add_trace(
        go.Heatmap(
            z=trace.z,
            zmin=trace.zmin,
            zmax=trace.zmax,
            colorscale=trace.colorscale,
            showscale=False  # 统一关闭子图色条，如需全局色条可单独添加
        ),
        row=row,
        col=col
    )

# 4. 调整布局，对齐px.imshow的显示风格
o_samplesviz.update_layout(
    margin=dict(l=0, r=0, t=0, b=0),
    facet_row_spacing=0.02,
    facet_col_spacing=0.005
)
o_samplesviz.update_xaxes(showticklabels=False)
o_samplesviz.update_yaxes(showticklabels=False)

# 后续更新数据示例：修改第一个子图的z值
new_data = np.array([[0.8]])
o_samplesviz.data[0].z = new_data

关键说明 #

• 必须通过make_subplots初始化FigureWidget，确保图具备子图网格结构，支持按行列添加trace。
• 复用px.imshow生成的zmin、zmax、colorscale等属性，保证热图样式一致。
• 更新数据时，直接通过o_samplesviz.data[index]定位目标trace，修改其z属性即可，FigureWidget会自动刷新显示，完美适配ipywidgets集成需求。

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