如何制作可以交互式更改着色参数的绘图？

Question

在plotly express中，我可以使用data.frames轻松创建散点图：

import plotly.express as px

df = px.data.gapminder()

fig = px.scatter(df, x="gdpPercap", y="lifeExp", log_x=True, color='continent')

有没有办法在图中添加下拉菜单，以便我也可以选择其他参数作为颜色？这样做不应重置缩放。

除了使用破折号应用程序之外，我不知道如何做到这一点，但我仍然遇到一些问题：悬停不会改变，并且无法在分类和数字着色之间切换。让我告诉你我到目前为止所取得的成就：

import dash
from dash import dcc, html
from dash.dependencies import Input, Output
import plotly.express as px
import numpy as np
df = px.data.gapminder()
df["moreData1"] = np.random.normal(size = len(df))

labels = df.columns[df.dtypes=="float64"]
#labels = df.columns

options = [{'label': v, 'value': v} for v in labels]
app = dash.Dash(__name__)

fig = px.scatter(df, 
                 x="gdpPercap",
                 y="lifeExp", 
                 log_x=True, 
                 color=labels[1],
                 #color='continent',
                 render_mode='webgl'
                )

# somehow this line prevents from resetting the zoom. Do not really understand why.
fig.update_layout(uirevision='some_unique_value')
# Define the layout
app.layout = html.Div([
    dcc.Dropdown(
        id='color-dropdown',
        options=options,
        value=labels[-1]
    ),
    dcc.Graph(
        id='scatter-plot',
        figure=fig
    )
])

# Define the callback to update the scatter plot based on the selected color
@app.callback(
    Output('scatter-plot', 'figure'),
    [Input('color-dropdown', 'value')]
)
def update_scatter_plot(selected_color):
    fig.update_traces(
        marker_color=df[selected_color]
    )
    return fig

# Run the app
if __name__ == '__main__':
    app.run(debug=True, port=8052)

它以某种方式工作，但我希望有两个改进：我也希望能够显示分类值（通过设置

labels = df.columns

而不是仅数字列可以看到，这不起作用。

更重要的是我想在悬停时显示颜色信息。

没有必要使用破折号应用程序，我想我会对纯粹的绘图更满意。

Answer 1

在回调中，您需要使用

selected_color

完全重建图形（该图形可以包含每个大陆 1 个跟踪，或每个国家 1 个跟踪等，没有跟踪更新）。

此外，为了保留更新之间的缩放范围，您可以使用

State()

读取当前范围并将其应用到新图形。

# Define the callback to update the scatter plot based on the selected color
@app.callback(
    Output('scatter-plot', 'figure'),
    Input('color-dropdown', 'value'),
    State('scatter-plot', 'figure'),
    prevent_initial_call=True
)
def update_scatter_plot(selected_color, fig):

    xrange = fig['layout']['xaxis']['range']
    yrange = fig['layout']['yaxis']['range']

    fig = px.scatter(df,
                     x="gdpPercap",
                     y="lifeExp",
                     log_x=True,
                     color=selected_color,
                     render_mode='webgl'
                     )

    fig.update_layout(xaxis_range=xrange, yaxis_range=yrange)

    return fig