如何使用Plotly绘制支持双参数调节滑块的交互式散点图

可行性说明 #

该需求完全可以实现。Plotly Express原生的animation_frame仅支持单参数控制，我们可以通过自定义控件绑定回调的方式实现多参数滑块控制，且可以完全移除自动播放功能，仅保留滑块交互用于数据探索，支持后续扩展更多控制参数。

Jupyter 环境轻量实现方案 #

如果仅在Jupyter系列环境中做数据探索，使用ipywidgets实现是最简便的方式，代码逻辑和你给出的伪代码非常接近：

依赖安装 #

首先安装需要的库：

pip install plotly ipywidgets

示例代码 #

import plotly.express as px
import ipywidgets as widgets
from IPython.display import display

# 加载示例数据集
df = px.data.gapminder()
# 提取可选参数值
year_opts = sorted(df["year"].unique())
continent_opts = sorted(df["continent"].unique())

# 绑定滑块控件与绘图函数
@widgets.interact(
    year = widgets.SelectionSlider(options=year_opts, value=year_opts[0], description="年份"),
    continent = widgets.SelectionSlider(options=continent_opts, value=continent_opts[0], description="大洲")
)
def draw_plot(year, continent):
    # 按选中参数筛选数据
    filtered_df = df[(df["year"] == year) & (df["continent"] == continent)]
    # 绘制散点图，固定轴范围避免切换参数时视图跳变
    fig = px.scatter(
        filtered_df,
        x = "gdpPercap",
        y = "lifeExp",
        size = "pop",
        color = "country",
        range_x = [df["gdpPercap"].min(), df["gdpPercap"].max()],
        range_y = [df["lifeExp"].min(), df["lifeExp"].max()]
    )
    fig.update_layout(showlegend=False, transition_duration=0)
    fig.show()

运行后即可得到两个独立滑块控制的散点图，没有自动播放按钮，滑动参数即可实时更新图表，需要新增控制参数只要在interact装饰器中新增对应滑块控件即可。

独立运行/导出HTML场景实现方案 #

如果需要脱离Jupyter环境使用，或者要导出为可分享的静态HTML文件，可以用Dash实现：

依赖安装 #

pip install plotly dash

示例代码 #

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

app = Dash(__name__)
df = px.data.gapminder()
year_opts = sorted(df["year"].unique())
continent_opts = sorted(df["continent"].unique())

# 页面布局：图表 + 两个滑块
app.layout = html.Div([
    dcc.Graph(id="scatter-plot"),
    html.P("年份："),
    dcc.Slider(
        min=0, max=len(year_opts)-1, value=0,
        marks={i: str(y) for i, y in enumerate(year_opts)},
        id="year-slider"
    ),
    html.P("大洲："),
    dcc.Slider(
        min=0, max=len(continent_opts)-1, value=0,
        marks={i: str(c) for i, c in enumerate(continent_opts)},
        id="continent-slider"
    )
])

# 绑定滑块值变化与绘图更新逻辑
@app.callback(
    Output("scatter-plot", "figure"),
    Input("year-slider", "value"),
    Input("continent-slider", "value")
)
def update_figure(year_idx, continent_idx):
    filtered_df = df[(df["year"] == year_opts[year_idx]) & (df["continent"] == continent_opts[continent_idx])]
    fig = px.scatter(
        filtered_df,
        x = "gdpPercap",
        y = "lifeExp",
        size = "pop",
        color = "country",
        range_x = [df["gdpPercap"].min(), df["gdpPercap"].max()],
        range_y = [df["lifeExp"].min(), df["lifeExp"].max()]
    )
    fig.update_layout(showlegend=False, transition_duration=0)
    return fig

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

运行后访问对应本地端口即可使用，该方案支持导出为独立HTML文件，可直接分享给其他人打开使用。

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