Plotly：Select 数据，带有来自 dataframe 的多个下拉菜单

Question

我想创建一个带有 plotly 个图形对象的交互式图形，我可以在其中 select 来自两个下拉菜单的数据。 菜单应该是select，具体数据来自dataframe。

我的 dataframe 看起来像这样：

    mode    y   x1  x2
0   A   3   0   6
1   A   4   1   7
2   A   2   2   8
3   B   1   3   9
4   B   0   4   10
5   B   5   5   11

我希望第一个下拉菜单在模式“A”和“B”之间进行选择，第二个在“x1”和“x2”之间进行选择。

第一个菜单完美运行：

fig = go.Figure()
fig.add_trace(go.Scatter(x=df["x1"], y=df[df["mode"]=="A"]["y"]))
            
buttons = []
for modes in list(df["mode"].unique()):
    buttons.append(
        dict(
            args=[{"y":[df[df["mode"]==modes]["y"]],
                   "x":[df[df["mode"]==modes]["x1"]]
            }],
            label = modes,
            method = "restyle"
        )
    )

fig.update_layout(
      updatemenus=[go.layout.Updatemenu(buttons=buttons)],
      # second menu
)           

对于第二个菜单，我尝试添加：

buttons=list([
                dict(
                    args= [{"x":[df["x1"]] }],
                    label= "x1",
                    method="restyle"),
                dict(
                    args= [{"x":[df["x2"]] }],
                    label= "x2",
                    method="restyle")
             ])

它添加了一个下拉菜单，但没有正确的功能。 如果您在第一个菜单中输入 select “B”，它不会选择“正确”的 x2 值。

问题就在这里：
我想我需要在以下方向添加一些内容：

dict(
                    args= [{"x":[df[df["mode"] == **current mode from menu 1** ]["x1"]] }],
                    label= "x1",
                    method="restyle"
)

为了选择正确的 x2 值，但我不知道如何。

就我所知，但我没有找到任何方法来做到这一点。 我已经尝试搜索但没有想出解决方案。

我想要的 output：

A and x1: plots y(A,x1) -> (0,3)(1,4)(2,2) 
A and x2: plots y(A,x2) -> (6,3)(7,4)(8,2) 
B and x1: plots y(B,x1) -> (3,1)(4,0)(5,5)
B and x2: plots y(B,x2) -> (9,1)(10,0)(11,5) 

代码：

import pandas as pd
import plotly.graph_objects as go

data = {'mode': ["A", "A", "A", "B", "B", "B"],'y': [3, 4, 2, 1, 0, 5], 'x1': [0, 1, 2, 3, 4, 5], 'x2': [6, 7, 8, 9, 10, 11]}
df = pd.DataFrame.from_dict(data)

fig = go.Figure()
fig.add_trace(go.Scatter(x=df["x1"], y=df[df["mode"]=="A"]["y"]))
            
buttons = []
for modes in list(df["mode"].unique()):
    buttons.append(
        dict(
            args=[{"y":[df[df["mode"]==modes]["y"]],
                   "x":[df[df["mode"]==modes]["x1"]]
                 }],
            label = modes,
            method = "restyle")
     )
    
    


fig.update_layout(
    updatemenus=[
        go.layout.Updatemenu(buttons=buttons),
        dict(
            buttons=list([
                dict(
                    args= [{"x":[df["x1"]] }],
                    label= "x1",
                    method="restyle"),
                dict(
                    args= [{"x":[df["x2"]] }],
                    label= "x2",
                    method="restyle")
            ]),
        y=0.2
        )
     ]
)

fig

Answer 1

您需要将df['y']添加到arg中，如下所示：

import pandas as pd
import plotly.graph_objects as go

data = {'mode': ["A", "A", "A", "B", "B", "B"],'y': [3, 4, 2, 1, 0, 5], 'x1': [0, 1, 2, 3, 4, 5], 'x2': [6, 7, 8, 9, 10, 11]}
df = pd.DataFrame.from_dict(data)

fig = go.Figure()
fig.add_trace(go.Scatter(x=df["x1"], y=df[df["mode"]=="A"]["y"]))
            
buttons = []
for modes in list(df["mode"].unique()):
    buttons.append(
        dict(
            args=[{"y":[df[df["mode"]==modes]["y"].tolist()],
                   "x":[df[df["mode"]==modes]["x1"].tolist()]
                 }],
            label = modes,
            method = "restyle")
     )
    
    


fig.update_layout(
    updatemenus=[
        
        go.layout.Updatemenu(buttons=buttons),
        go.layout.Updatemenu(
            buttons=list([
                dict(
                    args= [{"x":[df["x1"]], "y":[df["y"]]}], #<----------
                    label= "x1",
                    method="update"),
                dict(
                    args= [{"x":[df["x2"]], "y":[df["y"]]}],  #<----------
                    label= "x2",
                    method="update")
            ]),
        y=0.2,
        )
     ]
)

fig

Output