为何切换Plotly散点图X变量时，Y轴边缘直方图异常变化？

尝试用Plotly创建带边缘直方图的散点图，通过下拉菜单切换X变量。切换Y变量时仅边缘Y直方图变化，符合预期，但切换X变量时，边缘Y直方图会异常变成类似边缘X的样式，改用restyle方法也无法解决。

数据生成代码 #

# 导入库并生成数据
import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go

# 设置随机种子
np.random.seed(123)

# 生成随机数组
a = np.random.rand(100)
b = np.random.rand(100)
c = np.random.rand(100)
y = np.random.rand(100)

# 创建DataFrame
df_scatterplot = pd.DataFrame({'A': a, 'B': b, 'C': c, 'y':y})
df_scatterplot_nocc = df_scatterplot.loc[:, df_scatterplot.columns != 'y']

# 打印数据
print(df_scatterplot)

切换Y变量的可行代码 #

# 绘制散点图及边缘直方图
fig = px.scatter(df_scatterplot, x='A', y='y', marginal_x="histogram", marginal_y="histogram")

buttonlist = []

for col in df_scatterplot.columns:
    buttonlist.append(
      dict(
          args = [
                    {'y': [df_scatterplot[str(col)]]},  # 更新Y变量
                    {'yaxis.title.text': str(col)}      # 更新Y轴标题
                  ],
          label=str(col),
          method='update'
      )
    )

# 添加下拉菜单
fig.update_layout(updatemenus=[
          go.layout.Updatemenu(
              buttons=buttonlist,
              x=0.75, xanchor="left", y=1.0, yanchor="top",
          ),
      ],
  )

fig.update_layout(autosize=False, width=1000, height=700,)
fig.show()

切换X变量的问题代码片段 #

args = [
                    {'x': [df_scatterplot[str(col)]]},  # 更新X变量
                    {'xaxis.title.text': str(col)}      # 更新X轴标题
                  ],

问题原因 #

用px.scatter生成带边缘直方图的图表时，实际包含三个独立的trace：主散点图、顶部边缘X直方图、右侧边缘Y直方图。仅通过{'x': [...]}更新X变量时，会同时修改所有trace的x数据——包括边缘Y直方图的x轴（原本对应Y值），导致边缘Y直方图被错误替换成X变量的分布样式。

解决方案 #

需要针对不同类型的trace分别指定要更新的数据：

1. 主散点图：更新其x数据
2. 边缘X直方图：更新其x数据
3. 边缘Y直方图：保持其x数据为原Y变量（避免被修改）

修改后的完整代码如下：

# 绘制散点图及边缘直方图
fig = px.scatter(df_scatterplot, x='A', y='y', marginal_x="histogram", marginal_y="histogram")

buttonlist = []

# 遍历要切换的X列（这里选择A、B、C）
for col in ['A', 'B', 'C']:
    # 准备每个trace的更新参数
    update_data = []
    # 遍历所有trace，区分类型
    for i, trace in enumerate(fig.data):
        if trace.type == 'scatter':
            # 主散点图：更新x数据
            update_data.append({'x': [df_scatterplot[col]]})
        elif trace.type == 'histogram':
            if trace.xaxis == 'x':
                # 边缘X直方图：更新x数据
                update_data.append({'x': [df_scatterplot[col]]})
            else:
                # 边缘Y直方图：保持x为原y数据，不修改
                update_data.append({'x': [df_scatterplot['y']]})
    # 组合args：更新数据 + 更新X轴标题
    args = [
        {'data': update_data},
        {'xaxis.title.text': col}
    ]
    buttonlist.append(
        dict(
            args=args,
            label=col,
            method='update'
        )
    )

# 添加下拉菜单
fig.update_layout(updatemenus=[
          go.layout.Updatemenu(
              buttons=buttonlist,
              x=0.75, xanchor="left", y=1.0, yanchor="top",
          ),
      ],
  )

fig.update_layout(autosize=False, width=1000, height=700,)
fig.show()

代码说明 #

• 遍历每个trace，根据类型和关联的轴，分别指定更新内容：主散点和边缘X直方图更新为选中的X变量，边缘Y直方图保持原Y变量的数据。
• 使用{'data': update_data}的方式，精准定位每个trace的更新值，避免批量修改所有trace的x数据。

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