python - 破折号动态 slider

Question

精简问题:

我想要有由下拉列表索引的 slider 。因此，在下拉菜单中，我将有 A、B，这将导致调整 A 值的 slider 或调整 B 值的 slider 。在任何时候，我都希望有一个条形图显示 A 和 B 的值。

下面的代码可以执行此操作，但有一个问题除外:如果我调整 A 的默认值，将下拉列表切换到 B，然后将其切换回 A，A 会重置回其默认值。

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State

app = dash.Dash(__name__)

app.layout = html.Div([

    dcc.Dropdown(id='segselect', options = [{'label': 'A', 'value': 'A'}, 
        {'label': 'B', 'value': 'B'}]),

    html.Div(id='SliderAContainer'),
    html.Div(id='SliderBContainer'),
    dcc.Graph(id='plot_graph')

    ])

app.config['suppress_callback_exceptions']=True

@app.callback(Output('SliderAContainer', 'children'),
    [Input('segselect', 'value')])
def return_containerA(seg):
    if seg == 'A':
        return html.Div(dcc.Slider(id='A', min = 0, max = 10, step = 1))
    else:
        return html.Div(dcc.Slider(id='A', min = 0, max = 10, step = 1), style={'display': 'none'})

@app.callback(Output('SliderBContainer', 'children'),
    [Input('segselect', 'value')])
def return_containerB(seg):
    if seg == 'B':
        return html.Div(dcc.Slider(id='B', min = 0, max = 10, step = 1, value = 2))
    else:
        return html.Div(dcc.Slider(id='B', min = 0, max = 10, step = 1, value = 2), style={'display': 'none'})


@app.callback(
    Output('plot_graph', 'figure'),
    [Input('A', 'value'), Input('B', 'value')])
def plot_A(A, B):
    return {
            'data': [
                {'y': [A, B], 'type': 'bar'},
            ],
        }


if __name__ == '__main__':
    app.run_server(debug=True, port=8041, dev_tools_hot_reload=False)

如何才能使 A 在菜单切换到 B 并返回后不会重置，而不触发循环依赖？

<小时/>

原文:设置有点复杂，让我们看一个例子。

假设我正在为税单建模。我有一个公民数据库，其中列出了他们的州、婚姻状况和收入。

我想创建 slider ，允许我根据婚姻状况和州调整税率，然后计算平均税单。

屏幕上一次显示的 slider 太多，因此我设置了一个下拉菜单，让我们决定按州或婚姻状况进行调整，然后设置第二个下拉菜单，让我们选择特定的州或特定的状态婚姻状况。所以有两个下拉菜单:

1. 选择(州或婚姻状况)
2. 选择一个特定选项，例如。德克萨斯州或已婚(动态响应第一个下拉列表)

选择两个下拉菜单后，我想在屏幕上放置一个 slider 来调整该州或婚姻状况的税率。 .

slider 是我被卡住的地方。我需要他们提供三个特殊功能:

1. 如果我们将特定州(例如佛罗里达州)的税率调整为+5%，然后针对特定婚姻状况(例如已婚)调整+4%，那么我希望已婚佛罗里达人的税率增加+9% 。这意味着我需要存储佛罗里达州的税率，即使屏幕上没有动态生成的佛罗里达州 slider 也是如此。
2. 如果我设置了佛罗里达州的税率，然后将下拉菜单从佛罗里达州移开，然后再返回，那么我希望 slider 处于为佛罗里达州选择的税率。
3. 我希望从上传的数据库动态生成婚姻状况选项和州选项。

到目前为止我已经尝试了两种方法。

方法 1:创建一个 slider 字典(一个用于每个州，一个用于每个婚姻状况)，将所有 slider 放入布局中，但使除下拉列表中选择的 slider 之外的所有 slider 均不可见。这会中断，因为我需要计算平均税单，因此创建一个回调，将所有可能的利率上涨作为输入。但是，回调仅在渲染所有函数时才起作用，这会破坏。

方法 2:创建一个税率字典，以及一个具有动态名称的 slider 。然后，我可以创建所有州和婚姻状况的动态字典，该字典根据所选的下拉列表和 slider 进行更新。然而，为了在更新时不删除​​之前选择的值，这个动态字典需要通过回调创建，该回调将自身作为状态，而 Dash 不允许循环依赖，即使对于状态也是如此!

我很高兴发布代码，但它会非常长，所以我选择描述我上面尝试过的方法。

Answer 1

查看您的代码，我知道您不介意简单地隐藏 slider 。问题是您使用容器的 children 属性，该属性会在每次更改时“重新创建” slider ，从而有效地重置它们。我建议直接更改容器的 style 属性:

app.layout = html.Div([

    dcc.Dropdown(id='segselect', options=[{'label': 'A', 'value': 'A'},
                                          {'label': 'B', 'value': 'B'}]),

    html.Div(dcc.Slider(id='A', min=0, max=10, step=1), id='SliderAContainer'),
    html.Div(dcc.Slider(id='B', min=0, max=10, step=1, value=2), id='SliderBContainer'),
    dcc.Graph(id='plot_graph')

])   

@app.callback(Output('SliderAContainer', 'style'),
              [Input('segselect', 'value')])
def return_containerA(seg):
    if seg == 'A':
        return {}
    else:
        return {'display': 'none'}

@app.callback(Output('SliderBContainer', 'style'),
              [Input('segselect', 'value')])
def return_containerB(seg):
    if seg == 'B':
        return {}
    else:
        return {'display': 'none'}

请注意，我必须将 slider 添加为布局设置中的子项，因为它们不再由回调函数生成。

此外，请注意，您不再需要 suppress_callback_exceptions 配置，因为 slider 始终存在于 DOM 中。不过，离开它也没什么坏处。