Plotly Dashboard 3D散点图多滑块筛选空图问题求助

编写Dash代码实现带三个滑块筛选的3D散点图，运行后仅显示滑块，3D散点图为空且无报错，代码如下：

from dash import Dash, dcc, html, Input, Output
import plotly.express as px

app = Dash(__name__)

app.layout = html.Div([
    html.H4('Iris samples filtered by petal width'),
    dcc.Graph(id="3d-scatter-plot-x-graph"),
    html.P("Petal Width:"),
    dcc.RangeSlider(
        id='3d-scatter-plot-x-range-slider',
        min=0, max=2.5, step=0.1,
        marks={0: '0', 2.5: '2.5'},
        value=[0.5, 2]
    ),
    html.P("Sepal Length:"),
    dcc.RangeSlider(
        id='3d-scatter-plot-y-range-slider',
        min=0, max=2.5, step=0.1,
        marks={0: '0', 2.5: '2.5'},
        value=[0.5, 2]
    ),
    html.P("Sepal Width:"),
    dcc.RangeSlider(
        id='3d-scatter-plot-z-range-slider',
        min=0, max=5, step=0.1,
        marks={0: '0', 5: '5'},
        value=[0.5, 4.5]
    ),
])


@app.callback(
    Output("3d-scatter-plot-x-graph", "figure"),
    [Input("3d-scatter-plot-x-range-slider", "value"),
    Input("3d-scatter-plot-y-range-slider", "value"),
    Input("3d-scatter-plot-z-range-slider", "value")])
def update_bar_chart(slider_x, slider_y, slider_z):
    df = px.data.iris()  # replace with your own data source
    low_x, high_x = slider_x
    low_y, high_y = slider_y
    low_z, high_z = slider_z
    mask = (df.petal_width > low_x) & (df.petal_width < high_x) & (df.sepal_length > low_y) & (df.sepal_length < high_y)

    fig = px.scatter_3d(df[mask],
                        x='sepal_length', y='sepal_width', z='petal_width',
                        color="species", hover_data=['petal_width'])
    return fig


if __name__ == "__main__":
    app.run_server(debug=True)

问题原因 #

• Sepal Length滑块范围不匹配数据集：鸢尾花数据集的sepal_length字段实际取值范围是4.3~7.9，但代码中该滑块的max设为2.5，初始筛选区间[0.5,2]完全不在数据范围内，导致没有符合条件的样本，散点图为空。
• 未启用Sepal Width筛选逻辑：第三个滑块对应sepal_width的筛选，但代码中的mask未加入该字段的筛选条件，滑块功能未生效。
• 函数名update_bar_chart与功能不符（实际是更新散点图），虽不影响运行，但易造成混淆。

解决方案 #

1. 修正Sepal Length滑块的min和max，匹配数据集实际范围，并调整初始值到有效区间。
2. 在mask中加入sepal_width的筛选条件，让第三个滑块发挥作用。
3. （可选）修正函数名，使其符合功能逻辑。

修正后的完整代码 #

from dash import Dash, dcc, html, Input, Output
import plotly.express as px

app = Dash(__name__)

app.layout = html.Div([
    html.H4('Iris samples filtered by multiple features'),
    dcc.Graph(id="3d-scatter-plot-graph"),
    html.P("Petal Width:"),
    dcc.RangeSlider(
        id='petal-width-slider',
        min=0, max=2.5, step=0.1,
        marks={0: '0', 2.5: '2.5'},
        value=[0.5, 2]
    ),
    html.P("Sepal Length:"),
    dcc.RangeSlider(
        id='sepal-length-slider',
        min=4.3, max=7.9, step=0.1,
        marks={4.3: '4.3', 7.9: '7.9'},
        value=[5, 7]
    ),
    html.P("Sepal Width:"),
    dcc.RangeSlider(
        id='sepal-width-slider',
        min=2, max=4.4, step=0.1,
        marks={2: '2', 4.4: '4.4'},
        value=[2.5, 4]
    ),
])


@app.callback(
    Output("3d-scatter-plot-graph", "figure"),
    [Input("petal-width-slider", "value"),
     Input("sepal-length-slider", "value"),
     Input("sepal-width-slider", "value")])
def update_3d_scatter_plot(petal_width_range, sepal_length_range, sepal_width_range):
    df = px.data.iris()
    low_pw, high_pw = petal_width_range
    low_sl, high_sl = sepal_length_range
    low_sw, high_sw = sepal_width_range
    
    # 加入所有三个维度的筛选条件
    mask = (df.petal_width.between(low_pw, high_pw) &
            df.sepal_length.between(low_sl, high_sl) &
            df.sepal_width.between(low_sw, high_sw))

    fig = px.scatter_3d(df[mask],
                        x='sepal_length', y='sepal_width', z='petal_width',
                        color="species", hover_data=['petal_width'])
    return fig


if __name__ == "__main__":
    app.run_server(debug=True)

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