Plotly Dash技术咨询：如何为桑基图添加三个基于数据集列的多选下拉过滤器并配置回调

Hey there! Let's get those dropdown filters working with your Sankey diagram. I'll walk you through the fixes step by step, since you're new to Dash.

First, let's correct a couple of typos in your dropdown setup and add the default "Select All" value. Then we'll build the callback that actually filters your data and updates the Sankey figure.

Step 1: Fix the Dropdown Layout #

Your original code had a mistake where the Data Center dropdown was using companyID values instead of dataCenter. We'll fix that, set the default value to "Select All", and standardize the "Select All" value to 'all' for clarity:

app.layout = html.Div([
    dcc.Dropdown(
        id='my-multi-dataCenter-dropdown',
        # Use dataCenter column for options
        options=[{"label": i, "value": i} for i in dataset['dataCenter'].unique()] + [{"label": 'Select all', "value": 'all'}],
        multi=True,
        value=['all'],  # Default to Select All
        placeholder='Please select Data Center'
    ),
    dcc.Dropdown(
        id='my-multi-customer-dropdown',
        options=[{"label": i, "value": i} for i in dataset['Customer'].unique()] + [{"label": 'Select all', "value": 'all'}],
        multi=True,
        value=['all'],  # Default to Select All
        placeholder='Please select Customer'
    ),
    dcc.Dropdown(
        id='my-multi-companyID-dropdown',
        options=[{"label": i, "value": i} for i in dataset['companyID'].unique()] + [{"label": 'Select all', "value": 'all'}],
        multi=True,
        value=['all'],  # Default to Select All
        placeholder='Please select companyID'
    ),
    dcc.Graph(id='uxrPerfGoalSankey')  # We'll generate the initial figure in the callback
])

Step 2: Build the Filtering Callback #

The key part is replacing your existing callback with one that updates the Sankey figure. We'll filter the dataset based on the dropdown selections, then regenerate the Sankey diagram with the filtered data.

First, create a reusable function to generate your Sankey figure (replace the example code with your actual Sankey logic):

def create_sankey_figure(data):
    # Replace this with your existing Sankey code, using the filtered data
    fig = go.Figure(data=[go.Sankey(
        node=dict(
            pad=15,
            thickness=20,
            line=dict(color="black", width=0.5),
            # Update these to match your dataset's columns
            label=data['your_label_column'].unique(),
            color="blue"
        ),
        link=dict(
            # Update these to match your dataset's source/target/value columns
            source=data['source_column'].values,
            target=data['target_column'].values,
            value=data['value_column'].values
        )
    )])
    
    fig.update_layout(title_text="Your Sankey Diagram Title", font_size=10)
    return fig

Then add the callback that ties everything together:

@app.callback(
    Output('uxrPerfGoalSankey', 'figure'),
    Input('my-multi-dataCenter-dropdown', 'value'),
    Input('my-multi-customer-dropdown', 'value'),
    Input('my-multi-companyID-dropdown', 'value')
)
def update_sankey(data_center_selected, customer_selected, company_id_selected):
    # Start with the full dataset
    filtered_data = dataset.copy()
    
    # Filter by Data Center: if "all" isn't selected, keep only chosen values
    if data_center_selected is not None and 'all' not in data_center_selected and len(data_center_selected) > 0:
        filtered_data = filtered_data[filtered_data['dataCenter'].isin(data_center_selected)]
    
    # Filter by Customer
    if customer_selected is not None and 'all' not in customer_selected and len(customer_selected) > 0:
        filtered_data = filtered_data[filtered_data['Customer'].isin(customer_selected)]
    
    # Filter by companyID
    if company_id_selected is not None and 'all' not in company_id_selected and len(company_id_selected) > 0:
        filtered_data = filtered_data[filtered_data['companyID'].isin(company_id_selected)]
    
    # Generate and return the updated Sankey figure
    return create_sankey_figure(filtered_data)

How This Works #

1. Default Selection: Each dropdown starts with "Select all" selected, which tells the callback to keep all rows for that column.
2. Filter Logic: For each dropdown, if "all" isn't in the selected values, we filter the dataset to only include rows matching the selected options.
3. Dynamic Figure: Every time you change a dropdown selection, the callback runs, filters the data, and regenerates the Sankey diagram with the filtered dataset.

Final Notes #

• Make sure to update the create_sankey_figure function to use your actual column names and Sankey styling from your original fig code.
• If you want to keep the output container to show selected values, you can add a second callback or modify the existing one to return both the figure and the selected values text.

内容的提问来源于stack exchange，提问作者peace