Plotly：更新菜单的按钮实际上是如何工作的？

Question

我为什么想知道？

这似乎是一个非常简单的问题，但我在使用下拉菜单编辑具有多个轨迹的图形时遇到了一些困难，所以我真的很渴望确保我理解plotlys下拉菜单、更新菜单和按钮的内部工作原理100%正确。因此，如果有人能抽出时间来看看下面的示例，那就太好了。

---

问题是什么？

考虑由下面的代码片段生成的以下简单绘图：

情节1：

代码1：

# imports
import plotly.graph_objs as go
import pandas as pd
import numpy as np

# data
df1 = pd.DataFrame({'index': ['1','2','3'], 'A': [10,10,12], 'B': [11,11,11]})
df2 = pd.DataFrame({'index': ['1','2','3'], 'A': [10,10,10], 'B': [11,11,12]})

# plotly figure setup
fig=go.Figure()
fig.add_trace(go.Scatter(x=df1['index'], y=df1['A'], mode='lines'))
fig.add_trace(go.Scatter(x=df1['index'], y=df1['B'], mode='lines'))

#f=fig.to_dict()
fig.show()

现在我想用 替换蓝线的数据，df1['A']=[10,10,12]同时用df2['A']=[10,10,10]替换红线的数据。df1['B']=[11,11,11]df1['B']=[11,11,11]

我可以通过引入如下下拉菜单轻松地做到这一点：

图 2 - 下拉菜单 = df1:

图 3 - 下拉菜单 =df2

代码 2 - 与代码 1 相同，但添加了菜单：

# imports
import plotly.graph_objs as go
import pandas as pd
import numpy as np

# data
df1 = pd.DataFrame({'index': ['1','2','3'], 'A': [10,10,12], 'B': [11,11,11]})
df2 = pd.DataFrame({'index': ['1','2','3'], 'A': [10,10,10], 'B': [11,11,12]})

# plotly figure setup
fig=go.Figure()
fig.add_trace(go.Scatter(x=df1['index'], y=df1['A'], mode='lines'))
fig.add_trace(go.Scatter(x=df1['index'], y=df1['B'], mode='lines'))

f=fig.to_dict()
#fig.show()

buttons=list([dict(args=[{'y':[df1['A'],df1['B']],
                           #'type':'scatter',
                        }],
                    
                   label="df1",
                   method="restyle"
                ),
                dict(args=[{'y':[df2['A'], df2['B']],
                           #'type':'scatter',
                           #'mode':'markers'
                          }],
                    
                    label="df2",
                    method="restyle"
                )
            ])

fig.update_layout(
    updatemenus=[
        go.layout.Updatemenu(
            buttons=buttons,
            direction="down",
            pad={"r": 10, "t": 10},
            showactive=True,
            x=-0.25,
            xanchor="left",
            y=1,
            yanchor="top"
        ),
    ]
)

fig.show()

---

它是如何工作的？

现在让我们看一下在引入下拉菜单之前该图的结构如何。我们可以通过查看变量来做到这一点f=fig.to_dict()。以下是该词典的顶行：

  {'data': [{'mode': 'lines',
   'x': array(['1', '2', '3'], dtype=object),
   'y': array([10, 10, 12], dtype=int64),
   'type': 'scatter'},
  {'mode': 'lines',
   'x': array(['1', '2', '3'], dtype=object),
   'y': array([11, 11, 11], dtype=int64),
   'type': 'scatter'}]

在这里你可以看到'y'出现了两次：

# 1
'y': array([10, 10, 12], dtype=int64),

# 2
'y': array([10, 10, 12], dtype=int64),

这让我有点困惑，因为我们只需在下拉菜单中的按钮中引用一次即可更改这两个值：y

# from the snippet Code 2 above:
dict(args=[{'y':[df2['A'], df2['B']]}]

---

最后，主要问题是：

现在看起来很明显，它的工作方式是 updatemenuy从按钮获取值，查找图中的每个“y”键，然后将元素一一插入列表中[df2['A'], df2['B']]，只要有ys 需要填充。但这真的是这里发生的事情吗？如果你们中的任何一个人能够自信地回答“是”，我会很高兴，但我真的希望得到一个自信的“否”以及关于这些东西如何真正组合在一起的一些细节。

Answer 1

好问题！事情的真正工作原理是，使用method属性指定要应用的底层plotly.js Javascript 函数的名称，并且其参数来自args. 所以你实际上是在调用 JS 函数Plotly.restyle(<fig>, {'y': <whatever>})。这意味着您正在寻找的文档位于： https: //plot.ly/javascript/plotlyjs-function-reference/，更具体地说，该restyle函数位于此处https://plot.ly/javascript/plotlyjs-function-参考/#plotlyrestyle

正如你所看到的，它说：

请注意，如果不指定跟踪索引，则假定您要重新设置所有跟踪的样式。