与三个滑块链接的 3D 交互式图表

Question

我正在尝试创建一个与三个滑块链接的 3D 交互式图表。我巧妙地使用了破折号。但是当我运行这段代码时，我得到一个带有滑块的空白二维图。如果有人可以帮助我找到代码中的错误，那将非常有帮助。

这是我的数据：

A	C	B
191	11870402.57	150927.156
194	11534176.96	150926.613
200	8791715.569	150309.893
219	9058784.693	130344.409
193	11710374.76	150993.204
230	8966576.793	121803.204
196	11563137.82	147352.525
197	11559778.19	147360.662
232	8145250.015	134850.363
230	8960357.94	122119.87
241	8343604.908	118177.929

这是应用程序布局：

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

app = Dash(name)
app.layout = html.Div([
    html.H4('Illustrations'),
    dcc.Graph(id='graph_scatter'),
    html.P('A:'),
    dcc.Slider(
        id='3d-scatter-plot-x-range-slider',
        min=df['A'].min(), max=df['A'].max(),
        value=df['A'].max()),
    html.P('B:'),
    dcc.Slider(
        id='3d-scatter-plot-y-range-slider',
        min=df['B'].min(), max=df['B'].max(),
        value=df['B'].max()),
    html.P('C:'),
    dcc.Slider(
        id='3d-scatter-plot-z-range-slider',
        min=df['C'].min(), max=df['C'].max(),
        value=df['C'].max())
])

这是回调：

@app.callback(
    Output('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_range_x, slider_range_y, slider_range_z):
    df = pd.read_csv('ABC.csv') # replace with your own data source
    low_x, high_x = slider_range_x
    low_y, high_y = slider_range_y
    low_z, high_z = slider_range_z
    
    mask = (df.A > low_x) & (df.A < high_x) & (
        df.B > low_y) & (df.B < high_y) & (
        df.C > low_z) & (df.C < high_z)

    fig = px.scatter_3d(mask,
                        x='A', z='C', y='B')
    return fig

if __name__ == '__main__':
    app.run_server(debug=False)

Answer 1

我发现你的代码有些问题。

• 首先：您在 dcc 中设置 id。图表是

  graph_scatter

  但在回调中您设置它是

  graph

• 第二：您使用滑块，因此您无法更改

  low_x, low_y, low_z

  ，但可以更改

  high_x, high_y, high_y

  。这样你就不能使用类似

  low_x, high_x = slider_range_x

  之类的东西。根据您的代码，我修改如下：

from dash import Dash, dcc, html, Input, Output
import plotly.express as px
import pandas as pd
import dash_bootstrap_components as dbc
app = Dash(__name__, external_stylesheets=[dbc.themes.LUX])
app.layout = html.Div([
    html.H4('Illustrations'),
    dcc.Graph(id='graph_scatter',figure={}),
    html.P('A:'),
    dcc.Slider(
    id='3d-scatter-plot-x-range-slider',
    min=df['A'].min(), max=df['A'].max(),
    value=df['A'].max()),
    html.P('B:'),
    dcc.Slider(
    id='3d-scatter-plot-y-range-slider',
    min=df['B'].min(), max=df['B'].max(),
    value=df['B'].max()),
    html.P('C:'),
    dcc.Slider(
    id='3d-scatter-plot-z-range-slider',
    min=df['C'].min(), max=df['C'].max(),
    value=df['C'].max())

    ])

@app.callback(
   Output('graph_scatter', '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_range_x, slider_range_y, slider_range_z):
    high_x = slider_range_x
    high_y = slider_range_y
    high_z = slider_range_z
    dff = df[(df['A'] < high_x)&(df['B'] < high_y)&(df['C'] < high_z)]
    print(high_x)
    fig = px.scatter_3d(dff,x ='A', z='C',y='B')
    return fig
if __name__ == "__main__":
    app.run_server(debug=False)