情节:更新菜单的按钮如何真正起作用? [英] Plotly: How do the buttons for the update menus really work?
问题描述
为什么要知道?
这似乎是一个非常简单的问题，但是我在使用dropdownmenus编辑具有多条迹线的图形时遇到了一些困难，因此我非常渴望确保我了解plotlys下拉菜单的内部工作，更新菜单和按钮100％正确.因此，如果有人能够抽出时间看下面的示例，那就太好了.
This may seem like a very simple question, but I'm having some difficulties editing figures with multiple traces using dropdownmenus, so I'm really eager to make sure that I'm understanding the inner workings of plotlys dropdown menus, update menus and buttons 100% correct. So it would be great if someone could find the time to take a look at the example below.
出了什么问题?
请考虑下面的代码段生成的以下简单绘图图:
Consider the following simple plotly figure produced by the code snippet below:
地块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()
现在，我想用df2['A']=[10,10,10]替换蓝线df1['A']=[10,10,12]的数据，同时用df1['B']=[11,11,11]替换红线df1['B']=[11,11,11]的数据.
Now I'd like to replace the data for the blue line df1['A']=[10,10,12] with df2['A']=[10,10,10], and at the same time replace the data for the red line df1['B']=[11,11,11] with df1['B']=[11,11,11].
我可以很容易地通过引入这样的下拉菜单来做到这一点:
And I can easily do so by introducing a dropdown menu like this:
图2-下拉菜单= df1:
Plot 2 - Dropdownmenu = df1:
图3-下拉菜单= df2
Plot 3 - Dropdown menu = 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()来实现.这是该字典的顶行:
Now let's take a look at how the figure was structured before the dropdown menu was introduced. We can do so by lookingat the variable f=fig.to_dict(). Here are the top lines of that 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'出现两次:
Here you can see that 'y' appears twice:
# 1
'y': array([10, 10, 12], dtype=int64),
# 2
'y': array([10, 10, 12], dtype=int64),
这让我有些困惑，因为我们能够通过仅引用 一次y来更改 两者 的值/em> 插入下拉菜单中的按钮:
And this leaves me a bit puzzled, since we're able to change both values for y by only referencing it once int the button in the dropdown menu:
# from the snippet Code 2 above:
dict(args=[{'y':[df2['A'], df2['B']]}]
最后，主要问题是:
现在看来，很明显，此方法的工作方式是updatemenu从按钮中获取y的值， 在其中查找每个'y'键 该图，并在要填充的y中将元素逐一插入列表[df2['A'], df2['B']]中.但这真的就是这里发生的事情吗?如果你们中的任何一个能够表达自信的'是'，我对此感到非常满意，但我真的希望有一个自信的'否'和一个关于如何将这些东西真正组合在一起的一些细节.
Now it seems very apparent that the way this works is that the updatemenu takes the value for y from the button, looks up every 'y' key in the figure and inserts the elements in the list [df2['A'], df2['B']] one by one as long as there are ys to fill. But is that really exactly what's happening here? If any of you are able to deliver a confident 'YES' I'd be quite happy with that, but I'm really hoping for a confident 'NO' and a few details on how these things are really put together.
推荐答案
好问题！ 真正的工作方式是，使用method属性指定要应用的底层plotly.js Javascript函数的名称，其参数来自args.因此，您实际上是在调用JS函数Plotly.restyle(<fig>, {'y': <whatever>}).这意味着您正在寻找的文档在这里: https://plot.ly/javascript /plotlyjs-function-reference/，更具体地说是restyle函数，在这里
Great question! How things really work is that with the method attribute you're specifying the name of the underlying plotly.js Javascript function you want to apply, and its arguments are drawn from args. So you're really calling the JS function Plotly.restyle(<fig>, {'y': <whatever>}). This means that the documentation you're seeking is here: https://plot.ly/javascript/plotlyjs-function-reference/ and more specifically the restyle function which is here https://plot.ly/javascript/plotlyjs-function-reference/#plotlyrestyle
如您所见，它说:
请注意，如果未指定跟踪索引，则假定您想重新设置所有跟踪的样式.
这篇关于情节:更新菜单的按钮如何真正起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
