Plotly update_layout下拉菜单多次点击后功能异常问题

异常本质是多trace更新逻辑不匹配，具体有三处错误：

• trace可见性控制长度错误：用px.scatter指定color参数时，分类字段的每个唯一值都会生成1个独立trace，总trace数等于所有分类字段的唯一值个数之和，和分类字段本身的数量不相等。原代码生成的visible控制数组长度等于分类字段个数，和实际trace总数不匹配，切换分类时无法正确控制所有trace的显隐，会残留旧trace导致数据错位。
• 坐标轴更新范围错误：切换x/y轴时，原代码仅传入1组数据数组，但图表存在多个trace，仅第一个trace的坐标轴数据会被更新，其余trace仍保留旧数据，多次切换后数据完全错位，悬浮框找不到绑定的customdata字段，就会直接渲染原始模板字符串%{customdata[0]}。
• 悬浮模板未做统一配置：数据错位时没有固定模板兜底，直接暴露模板解析异常的原始文本。

1. 遍历添加分类trace时，记录每个分类字段对应的trace索引区间，生成和总trace数等长的显隐控制数组
2. 切换x/y轴时，为所有trace同步更新对应的坐标轴数据，保证所有显示的trace数据一致
3. 统一为所有trace配置固定的悬浮框模板，避免模板解析异常

修复后可正常运行的代码如下：

import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go

X = pd.DataFrame({  'num1': [1,2,3,4],
                    'num2': [40,30,20,10],
                    'num3': [0,1,2,3],
                    'cat1': ['A', 'A', 'A', 'B'],
                    'cat2': ['c', 's', 's', 's'],
                    'cat3': ['a', 'b', 'c', 'd']})

numerical_features   = sorted(X.select_dtypes(include=np.number).columns.tolist())
categorical_features = sorted(list(set(X.columns) - set(numerical_features)))

init_x, init_y = numerical_features[0], numerical_features[1]

fig = go.Figure()
trace_ranges = []
current_idx = 0

for cat_col in categorical_features:
    # 生成单个分类字段对应的散点图
    cat_scatter = px.scatter(
        X, x=init_x, y=init_y, color=cat_col,
        labels={init_x:init_x, init_y:init_y},
        hover_data=['cat3', 'num3']
    )
    trace_cnt = len(cat_scatter.data)
    # 统一配置悬浮模板，清除多余的侧边框
    for trace in cat_scatter.data:
        trace.hovertemplate += "<extra></extra>"
    fig.add_traces(list(cat_scatter.select_traces()))
    # 记录当前分类字段对应的trace索引范围
    trace_ranges.append((current_idx, current_idx + trace_cnt))
    current_idx += trace_cnt

total_trace = current_idx

# 初始化显隐状态：默认展示第一个分类字段对应的trace
init_visible = [False] * total_trace
start, end = trace_ranges[0]
for i in range(start, end):
    init_visible[i] = True
for idx, trace in enumerate(fig.data):
    trace.visible = init_visible[idx]

# 构建x轴切换按钮
x_buttons = []
for x_col in numerical_features:
    x_data = [X[x_col].values for _ in range(total_trace)]
    x_buttons.append({
        "label": f"x - {x_col}",
        "method": "update",
        "args": [
            {"x": x_data},
            {"xaxis": {"title": x_col}}
        ]
    })

# 构建y轴切换按钮
y_buttons = []
for y_col in numerical_features:
    y_data = [X[y_col].values for _ in range(total_trace)]
    y_buttons.append({
        "label": f"y - {y_col}",
        "method": "update",
        "args": [
            {"y": y_data},
            {"yaxis": {"title": y_col}}
        ]
    })

# 构建分类着色切换按钮
color_buttons = []
for cat_id, cat_col in enumerate(categorical_features):
    visible_arr = [False] * total_trace
    start, end = trace_ranges[cat_id]
    for i in range(start, end):
        visible_arr[i] = True
    color_buttons.append({
        "label": f"color - {cat_col}",
        "method": "update",
        "args": [
            {"visible": visible_arr},
            {"showlegend": True}
        ]
    })

fig.update_layout(
    xaxis_title=init_x,
    yaxis_title=init_y,
    updatemenus=[
        {"buttons": x_buttons},
        {"buttons": y_buttons, "y": 0.8},
        {"buttons": color_buttons, "y": 0.6}
    ]
)
fig.show()

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