python - 防止链式回调将下拉菜单切换为原始值破折号-6ren

python - 防止链式回调将下拉菜单切换为原始值破折号

转载作者：行者123 更新时间：2023-12-03 19:02:50

我有一段很长的代码用于来自多个嵌套字典的几个链式回调。我有我想提供的所有必要的下拉菜单和选项。但是，每当我将本示例中的“裁剪”下拉列表更改为原始选项(即 Jade 米)以外的其他选项时，它会重置下方的“权重”下拉列表。同样，如果我更改“权重”下拉列表，它会将“预测变量”下拉列表重置为原始选项。我怎样才能防止这种情况？链式回调的重点是改变一个选项会改变绘制的数据，因为它们都是链接的。
我认为这里的数据不重要？但它的功能是这样的:

final_dict[init_date][model][weight][crop]

上面的精确字典然后将输出一个数据帧。数据框中的列将成为最终将被绘制的“预测变量”。如果我确实需要添加数据，我可以尝试这样做，但字典非常大。
这是我到目前为止的代码。请注意，图表是空的，因为我还没有走那么远。

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from pandas import Timestamp
import plotly.graph_objs as go
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import numpy as np
from plotly.subplots import make_subplots
import plotly.express as px
import pandas as pd
import numpy as np
from datetime import timedelta
import glob
import datetime as dt

import xarray as xr
import os 
from PIL import Image
import time
import random

my_dict={}

for i in np.arange(1,17,1):
    n=random.randint(1,10)
    m=random.randint(1,10)
    data=[[pd.Timestamp('2020-10-06'),n,m],[pd.Timestamp('2020-10-07'),m,n],[pd.Timestamp('2020-10-08'),n,m],[pd.Timestamp('2020-10-09'),m,n]]
    my_dict[i]=pd.DataFrame(data=data, columns=['time', 'Temp','Precip'])

final_dict={'day1':{'model1':{'weight1':{'crop1':my_dict[1], 'crop2':my_dict[2]},
                           'weight2':{'crop1':my_dict[3], 'crop2':my_dict[4]}},
                 
                 'model2':{'weight1':{'crop1':my_dict[5], 'crop2':my_dict[6]},
                           'weight2':{'crop1':my_dict[7], 'crop2':my_dict[8]}}},
         
         'day2':{'model1':{'weight1':{'crop1':my_dict[9], 'crop2':my_dict[10]},
                           'weight2':{'crop1':my_dict[11], 'crop2':my_dict[12]}},
                 
                 'model2':{'weight1':{'crop1':my_dict[13], 'crop2':my_dict[14]},
                           'weight2':{'crop1':my_dict[15], 'crop2':my_dict[16]}}}}

app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])

controls = dbc.Card(
    [   dbc.FormGroup(
            [dbc.Label("Init Date"),
                dcc.Dropdown(
                    id='init_dd',
                    options=[{'label': k, 'value': k} for k in final_dict.keys()],
                    value=list(final_dict.keys())[0],
                    clearable=False,
                ),
            ]
        ),
        dbc.FormGroup(
            [dbc.Label("Model"),
                dcc.Dropdown(
                    id='model_dd',
                    clearable=False,
                ),
            ]
        ), 
        dbc.FormGroup(
            [dbc.Label("Crop"),
                dcc.Dropdown(
                    id='crop_dd',
                    clearable=False,
                ),
            ]
        ),           
        dbc.FormGroup(
            [dbc.Label("Weighting"),
                dcc.Dropdown(
                    id='weight_dd',
                    clearable=False,
                ),
            ]
        ),
        dbc.FormGroup(
            [dbc.Label("Forecast Variable"),
                dcc.Dropdown(
                    id='columns_dd',
                    clearable=False,
                ),
            ]
        ),

    ],
    body=True,
)


app.layout = dbc.Container(
    [
        html.Hr(),
        dbc.Row([
            dbc.Col([
                dbc.Row([
                    dbc.Col(controls)
                ],  align="start"), 
            ],xs = 2)
            ,
            dbc.Col([
                dbc.Row([
                    dbc.Col([html.Div(id = 'plot_title')],)
                ]),
                dbc.Row([
                    dbc.Col(dcc.Graph(id="crop-graph")),
                ])
            ])
        ],), 
    ],
    fluid=True,
)
    
# Callbacks #####################################################################
#set the model
@app.callback(
    Output('model_dd', 'options'),
    [Input('init_dd', 'value')])
def set_model_options(model):
    return [{'label': i.replace('_',' '), 'value': i} for i in final_dict[model]]
 
@app.callback(
    Output('model_dd', 'value'),
    [Input('model_dd', 'options')])
def set_model_options_value(available_model):
    return available_model[0]['value']

#set the weight
@app.callback(
    Output('weight_dd', 'options'),
    [Input('init_dd', 'value'),
     Input('model_dd', 'value')])
def set_weight_options(selected_init, selected_model):
    return [{'label': i, 'value': i} for i in final_dict[selected_init][selected_model]]
 
@app.callback(
    Output('weight_dd', 'value'),
    [Input('weight_dd', 'options')])
def set_weight_value(available_weight):
    return available_weight[0]['value']

#set the crop
@app.callback(
    Output('crop_dd', 'options'),
    [Input('init_dd', 'value'),
     Input('model_dd', 'value'),
     Input('weight_dd', 'value')])
def set_crop_options(selected_init, selected_model, selected_weight):
    return [{'label': i, 'value': i} for i in final_dict[selected_init][selected_model][selected_weight]]
 
@app.callback(
    Output('crop_dd', 'value'),
    [Input('crop_dd', 'options')])
def set_crop_value(available_crop):
    return available_crop[0]['value']

#set the variable
@app.callback(
    Output('columns_dd', 'options'),
    [Input('init_dd', 'value'),
     Input('model_dd', 'value'),
     Input('weight_dd', 'value'),
     Input('crop_dd', 'value')])
def set_column_options(selected_init, selected_model, selected_weight, selected_crop):
    return [{'label': i, 'value': i} for i in final_dict[selected_init][selected_model][selected_weight][selected_crop].columns[1:]]
 
@app.callback(
    Output('columns_dd', 'value'),
    [Input('columns_dd', 'options')])
def set_column_value(available_column):
    return available_column[1]['value']

app.run_server(mode='external', port = 8099)

编辑:在示例虚拟数据中添加。请注意在更改某些选项组合时，其他选项如何切换回原始值。想防止这种情况发生。

最佳答案

具体的数据示例有所帮助。我看到

数据集存储在嵌套字典中

您希望允许用户选择特定数据集(每个用户输入选项取决于嵌套结构中的先前/上游选择)。

因为这里的嵌套结构意味着对于给定的输入更改，您只想为后续/下游输入更新输入选项。

关于更好地控制链式回调的问题，我认为这是使用 Input() 的问题。和 State()在正确的地方。
试试这个(我重命名了你的 final_dict 以便更容易监控正在发生的事情):

from jupyter_dash import JupyterDash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State, ClientsideFunction
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
from pandas import Timestamp
import plotly.graph_objs as go
from dash.dependencies import Input, Output, State
import dash_bootstrap_components as dbc
import numpy as np
from plotly.subplots import make_subplots
import plotly.express as px
import pandas as pd
import numpy as np
from datetime import timedelta
import glob
import datetime as dt

import xarray as xr
import os 
from PIL import Image
import time
import random

my_dict={}

for i in np.arange(1,17,1):
    n=random.randint(1,10)
    m=random.randint(1,10)
    data=[[pd.Timestamp('2020-10-06'),n,m],[pd.Timestamp('2020-10-07'),m,n],[pd.Timestamp('2020-10-08'),n,m],[pd.Timestamp('2020-10-09'),m,n]]
    my_dict[i]=pd.DataFrame(data=data, columns=['time', 'Temp','Precip'])

final_dict={'day1':{'model1':{'weight1':{'crop1':my_dict[1], 'cropA':my_dict[2]},
                           'weight2':{'crop2':my_dict[3], 'cropB':my_dict[4]}},
                 
                 'model2':{'weight3':{'crop3':my_dict[5], 'cropC':my_dict[6]},
                           'weight4':{'crop4':my_dict[7], 'cropD':my_dict[8]}}},
         
         'day2':{'model3':{'weight5':{'crop5':my_dict[9], 'cropE':my_dict[10]},
                           'weight6':{'crop6':my_dict[11], 'cropF':my_dict[12]}},
                
                 'model4':{'weight7':{'crop7':my_dict[13], 'cropG':my_dict[14]},
                           'weight8':{'crop8':my_dict[15], 'cropH':my_dict[16]}}}}

app = JupyterDash(external_stylesheets=[dbc.themes.SLATE])

controls = dbc.Card(
    [   dbc.FormGroup(
            [dbc.Label("Init Date"),
                dcc.Dropdown(
                    id='init_dd',
                    options=[{'label': k, 'value': k} for k in final_dict.keys()],
                    value=list(final_dict.keys())[0],
                    clearable=False,
                ),
            ]
        ),
        dbc.FormGroup(
            [dbc.Label("Model"),
                dcc.Dropdown(
                    id='model_dd',
                    clearable=False,
                ),
            ]
        ), 
        dbc.FormGroup(
            [dbc.Label("Crop"),
                dcc.Dropdown(
                    id='crop_dd',
                    clearable=False,
                ),
            ]
        ),           
        dbc.FormGroup(
            [dbc.Label("Weighting"),
                dcc.Dropdown(
                    id='weight_dd',
                    clearable=False,
                ),
            ]
        ),
        dbc.FormGroup(
            [dbc.Label("Forecast Variable"),
                dcc.Dropdown(
                    id='columns_dd',
                    clearable=False,
                ),
            ]
        ),

    ],
    body=True,
)


app.layout = dbc.Container(
    [
        html.Hr(),
        dbc.Row([
            dbc.Col([
                dbc.Row([
                    dbc.Col(controls)
                ],  align="start"), 
            ],xs = 2)
            ,
            dbc.Col([
                dbc.Row(html.Div(id='selected_data')),
                # dbc.Row([
                #     dbc.Col([html.Div(id = 'plot_title')],)
                # ]),
                dbc.Row([
                    dbc.Col(dcc.Graph(id="crop-graph")),
                ])                
            ])
        ],), 
    ],
    fluid=True,
)
    
# Callbacks #####################################################################
#set the model
@app.callback(
    Output('model_dd', 'options'),
    [Input('init_dd', 'value')])
def set_model_options(model):
    return [{'label': i.replace('_',' '), 'value': i} for i in final_dict.get(model).keys()]
 
@app.callback(
    Output('model_dd', 'value'),
    [Input('model_dd', 'options')])
def set_model_options_value(available_model):
    return available_model[0]['value']

#set the weight
@app.callback(
    Output('weight_dd', 'options'),
    [Input('model_dd', 'value')],
    [State('init_dd', 'value')])
def set_weight_options(selected_model, selected_init):
    if selected_model is None: return None 
    print('selected_model(): ', selected_init, selected_model)
    return [{'label': i, 'value': i} for i in final_dict.get(selected_init).get(selected_model).keys()]
 
@app.callback(
    Output('weight_dd', 'value'),
    [Input('weight_dd', 'options')])
def set_weight_value(available_weight):
    return available_weight[0]['value']

#set the crop
@app.callback(
    Output('crop_dd', 'options'),
     [Input('weight_dd', 'value')],
     [State('init_dd', 'value'),
     State('model_dd', 'value')])
def set_crop_options(selected_weight, selected_init, selected_model):
    if selected_model is None or selected_weight is None: return None 
    print('set_crop_options(): ',selected_init, selected_model, selected_weight)
    return [{'label': i, 'value': i} for i in final_dict.get(selected_init).get(selected_model).get(selected_weight).keys()]

@app.callback(
    Output('crop_dd', 'value'),
    [Input('crop_dd', 'options')])
def set_crop_value(available_crop):
    return available_crop[0]['value']

#set the variable
@app.callback(
    Output('columns_dd', 'options'),
    [Input('crop_dd', 'value')],
    [State('init_dd', 'value'),
     State('model_dd', 'value'),
     State('weight_dd', 'value')])
def set_column_options(selected_crop, selected_init, selected_model, selected_weight):
    if selected_crop is None or selected_weight is None or selected_model is None: return None
    print('set_column_options(): ', selected_init, selected_model, selected_weight, selected_crop)
    return [{'label': i, 'value': i} for i in final_dict.get(selected_init).get(selected_model).get(selected_weight).get(selected_crop).columns[1:]]
 
@app.callback(
    Output('columns_dd', 'value'),
    [Input('columns_dd', 'options')])
def set_column_value(available_column):
    if available_column is None: return None
    return available_column[1]['value']

@app.callback(
    Output('selected_data', 'children'),
    [Input('init_dd', 'value'),
     Input('model_dd', 'value'),
     Input('weight_dd', 'value'),
     Input('crop_dd', 'value'),
     Input('columns_dd','value')]
    )
def show_data(init_dd, model_dd, weight_dd, crop_dd, columns_dd):
    if crop_dd is None or weight_dd is None or model_dd is None or columns_dd is None: return None
    print('show_data():', init_dd, model_dd, weight_dd, crop_dd, columns_dd)
    try:
        data = final_dict[init_dd][model_dd][weight_dd][crop_dd][columns_dd].to_json(orient='split')
    except:
        return
    return data


def make_plot(df, var):
    fig = go.Figure(
            data=[go.Scatter(x=df['time'], y=df[var], name=var)],
            layout={
                'yaxis': {'title': f'Plot of <b>{var}</b>'}
            }
        )
    return fig


no_data_fig = {"layout": {
        "xaxis": { "visible": False},
        "yaxis": {"visible": False},
        "annotations": [
            { "text": "",
                "xref": "paper",
                "yref": "paper",
                "showarrow": False,
                "font": {"size": 20 }
            }]
        }
    }

@app.callback(
    Output('crop-graph', 'figure'),
    [Input('init_dd', 'value'),
     Input('model_dd', 'value'),
     Input('weight_dd', 'value'),
     Input('crop_dd', 'value'),
     Input('columns_dd','value')]
    )
def plot_data(init_dd, model_dd, weight_dd, crop_dd, columns_dd):
    if crop_dd is None or weight_dd is None or model_dd is None or columns_dd is None: return None
    print('plot_data():', init_dd, model_dd, weight_dd, crop_dd, columns_dd)
    try:
        data = final_dict[init_dd][model_dd][weight_dd][crop_dd]
        data_col = data[columns_dd]
    except:
        return no_data_fig
    return make_plot(data, columns_dd)


app.run_server(mode='external', port = 8098, debug=True)

关于python - 防止链式回调将下拉菜单切换为原始值破折号，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64269222/

文章推荐： iphone - 打开从 UIWebView 到 Safari (iphone) 的链接

文章推荐： delphi - 如何在Delphi中计算每个单词的长度？

文章推荐： delphi - 如何将HH:MM时间值添加到Access数据库？

文章推荐： iphone - 在 MKMapView 上隐藏 Google Logo

链式-父类中返回子类对象
一晃五年没写博客了，依旧再C#上耕耘，依旧没有啥建树，现在也不知道.net上还有多少人再使用，在这里分享一些自己觉得写的还算优雅的代码。对于自己写着完的代码，我特别喜欢链式（来源于jQuer
c# - 链式 if 语句的模式
我正在构建一个吉他和弦查找应用程序。我使用多维数组来表示指板。数组中的每个元素都由具有字符串属性“Note”的 FretSpace 结构表示。为了初始化指板上的音符属性，我传递了要处理的吉他弦的详细信
Javascript 链式 promise
我在演示代码中使用 setTimeout 函数模拟了 3 个 ajax 调用。我将从一段运行良好的代码开始:所有调用都是并行进行的，我希望所有调用都能成功，否则会出现错误。 var p1 = func
python - 链式 AND 条件给出不明确的结果
谁能解释一下？ a = [2,3,4] b = [5,6,8,9] print(len(a) > 0) print(len(b) > 0) print((len(a) > 0) & len(b) >
Java 链式/嵌套方法调用
我正在处理具有多个子 JSONObject 的 JSONObject。这是我填写内容的方式: myJson.getJSONObject(CAT_NAME).put(VAR_NAME, var)
c# - 链式 IF 结构
想象一下这种情况，我有一个需要检查属性的对象。但是，该对象当前可以具有空值。如何在一个“if”条件下检查这两个条件？目前，我必须做这样的事情: if (myObject != null) {
java - 链式 Observable
我有一个对象集合，称它们为obj。他们有一个 act() 方法。 act() 方法最终会导致 o 上的 event() observable 调用 onComplete。链接这些的好方法是什么？即
python - 链式 QSortFilterProxyModel
假设我有一个列表变量 datalist 存储 10,000 个字符串实体。QTableView 只需要显示其中的一些实体。这就是为什么 QTableView 被指定为 QSortFilterProxy
wix - 链式 MSI 安装程序工具
我正在寻找支持链式 MSI 安装的工具(最好不是 InstallShield，而且最好是便宜/免费的)。我有几个小型安装需要能够单独部署，但也需要作为一个组部署，我不想维护多个安装程序。看起来我需要
c# - 链式 LINQ 语句的效率如何？
在这种情况下，我想迭代集合中除最后 2 个元素之外的所有元素。假设我采用了一种奇怪的方式，例如 x.Reverse().Skip(2).Reverse()。每个 LINQ 操作是否会有效地生成一个
javascript - 链式 html 数字选择
对于javascript来说非常陌生，我有两个html数字选择，包括年份，我想将第二个选择与第一个选择链接起来，这样当我在第一个选择中选择年份时(而第二个选择没有选项)首先)，第二个选择应包括从所选数
javascript - 链式 bluebird .then() 的奇怪执行顺序
有人可以向我解释一下为什么以下两个链式函数: // returns zero if okay var resetCounter = function (model) { return new Prom
AngularJS 链式 promise 和最终回调
所以我有 2 个 promise 函数。当第一个函数出现错误时，我希望它显示错误消息。当完成或失败时，我希望他们执行一个finally catch all 函数，但由于某种原因它不起作用。我的代码如下
javascript - 链式 promise 发挥作用
我有一个函数 const func = () => server.insertPatientSurveyQuestionToDataBase(Store.getPatientID(), SurveyN
javascript - 链式 promise 如何在微任务队列中排队
(async function() { var a,b; function flush(){ return new Promise(res => {
javascript - 链式 promise 并使用所有变量
这个问题已经有答案了: Promise chaining: Use result from previous promise in next then callback [duplicate] (1
powershell - 链式 powershell 替换命令是否一个接一个地执行？
这可能不是专业正则表达式理解的问题。唯一重要的是因为我正在运行多个链式替换命令，这些命令会影响文本文件中的某些相同文本。我还想象在替换之前，根据分隔符词(需要多次替换)的使用方式对 txt 文件进行分
python - 链式 Python 类调用
我正在尝试构建一组类来定义 OSI 堆栈中协议(protocol)的分层属性...从抽象意义上讲，我只需要从父 python 类继承属性，但我需要能够调用整个类链一次...所以，我正在寻找这样的东西.
javascript - 链式 promise 不会捕获错误
我正在努力兑现 promise ，到目前为止我偶然发现了这一点: new Promise((resolve, reject) => { setTimeout(() => { r
javascript - 链式 promise 并装饰对象
我试图理解 promise ，我需要链接它们并装饰来自不同端点的对象宽度数据。例如: 我的 Node-express 应用程序中有这个 //controller.js export const ge

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

python - 防止链式回调将下拉菜单切换为原始值破折号