使用Plotly下拉菜单过滤长格式数据时遇异常问题求助

问题背景 #

用Plotly做下拉菜单过滤长格式鸢尾花数据，后续还要结合分面功能，但试了两种方法都失效：切换下拉选项时，数据点颜色、悬停信息、图例及展示数据均出现异常，不同方法异常表现不同。测试代码如下：

import pandas as pd
import plotly.express as px

df = px.data.iris()

dropdown_menu = [
    {
        'label': 'All Categories',
        'method': 'update',
        'args': [{
                  'visible': True
               },
                
     {'title': 'All Categories'}]}
]
 
 
dropdown_menu.extend(
    [{'label': cat,
      'method': 'update',
      'args': [{
       ### Attempt 1
                  'visible': df['species'] == cat,

       ### Attempt 2
                  #'y': [df[df['species'] == cat]['petal_length']],
                  #'x': [df[df['species'] == cat]['petal_width']],
               },
                
     {'title': cat}]} for cat in df['species'].unique()]
)
 
fig = px.line(
    df,
    x='petal_width', 
    y='petal_length', 
    color='species', 
    line_group='species', 
    markers = True)#, facet_col='other categorical feature')
 
fig.update_layout(
    {'updatemenus': [
        {
            'type': 'dropdown',
            'buttons': dropdown_menu,
            'direction': 'down',
            'showactive': True,
            'active': 0,
            'x': 0.15,
            'xanchor': 'left',
            'y': 1.15,
            'yanchor': 'top'
        }
   ]}
)

两种尝试的问题分析 #

Attempt 1 问题 #

px.line按species分组后，每个物种对应一个独立的trace（共3个trace），但df['species'] == cat生成的是长度等于数据集总行数的布尔数组，而visible参数需要的是对应每个trace的布尔值（比如3个元素的数组，控制每个物种的trace是否显示）。长度不匹配导致Plotly解析错误，出现颜色、图例异常。

Attempt 2 问题 #

直接替换x/y的思路本身不符合多trace的结构：原图表有3个trace，替换时如果不对应每个trace的状态，会导致数据和trace的映射关系混乱。

修正方案 #

把visible参数改成对应每个trace的布尔值，比如针对每个物种cat，生成一个长度等于物种数量的布尔数组，标记当前物种的trace显示，其他隐藏。修正后的代码如下：

import pandas as pd
import plotly.express as px

df = px.data.iris()
species_list = df['species'].unique().tolist()

dropdown_menu = [
    {
        'label': 'All Categories',
        'method': 'update',
        'args': [
            {'visible': [True]*len(species_list)},
            {'title': 'All Categories'}
        ]
    }
]

dropdown_menu.extend(
    [
        {
            'label': cat,
            'method': 'update',
            'args': [
                # 仅当前物种对应的trace显示，其他隐藏
                {'visible': [s == cat for s in species_list]},
                {'title': cat}
            ]
        } 
        for cat in species_list
    ]
)

fig = px.line(
    df,
    x='petal_width', 
    y='petal_length', 
    color='species', 
    line_group='species', 
    markers=True
)

fig.update_layout(
    updatemenus=[
        {
            'type': 'dropdown',
            'buttons': dropdown_menu,
            'direction': 'down',
            'showactive': True,
            'active': 0,
            'x': 0.15,
            'xanchor': 'left',
            'y': 1.15,
            'yanchor': 'top'
        }
    ]
)

fig.show()

后续要加facet_col的话，只需要在px.line里添加参数，visible的逻辑不需要修改——因为Plotly会自动给每个分面的每个物种生成trace，visible数组的长度会自动匹配总trace数，布尔值的生成逻辑依然适用。

额外问题解答：第二种尝试中的方括号作用 #

方括号的作用是把筛选后的Series包装成列表，Plotly的update方法中，x/y参数如果接收列表，列表里的每个元素对应一个trace的数据源。

如果去掉方括号，直接传df[df['species'] == cat]['petal_length']这个Series，Plotly会把Series的每个元素当成一个独立trace的y值，瞬间生成上百个trace，导致图表完全混乱，所以结果会完全不同。

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