Plotly Express 如何实现散点图与随动画帧联动变化的线图组合

为什么直接加trace不生效 #

Plotly 由px.scatter生成的动画图，每个时间点的渲染内容独立存储在fig.frames数组中。通过add_trace/add_vline直接添加的元素属于全局共享对象，会在所有帧中固定显示，无法随帧切换改变参数，因此没法实现随日期动态调整的分割线效果。

分步实现 #

1. 预计算每日分割线参数
   遍历每个入院天数对应的患者子集，用你已实现的感知器算法训练得到当天的分割线方程。基于x轴的取值范围生成直线的两个端点，缓存每个日期对应的直线坐标：

   import plotly.graph_objects as go
   
   split_line_store = {}
   # 基于x轴实际数据范围确定直线绘制的左右端点
   x_axis_left = df['neutrophils count'].min() * 0.9
   x_axis_right = df['neutrophils count'].max() * 1.1
   
   for day in sorted(df['days_from_admission'].unique()):
       day_data = df[df['days_from_admission'] == day]
       # 替换为你已有的感知器计算逻辑，返回分割线方程 w1*x + w2*y + b = 0 的系数
       w1, w2, bias = your_perceptron_training_func(day_data)
       # 计算左右端点对应的y坐标
       y_left = (-w1 * x_axis_left - bias) / w2
       y_right = (-w1 * x_axis_right - bias) / w2
       split_line_store[day] = {
           "x": [x_axis_left, x_axis_right],
           "y": [y_left, y_right]
       }
   

2. 为每个动画帧绑定专属分割线
   遍历fig.frames中的所有帧，将对应日期的分割线作为独立trace追加到帧的data渲染列表中。帧切换时，Plotly会自动加载当前帧绑定的分割线，实现同步动画效果：

   for frame in fig.frames:
       # 解析当前帧对应的入院天数
       current_day = int(frame.name)
       line_pos = split_line_store[current_day]
       # 定义分割线样式：黑色虚线，不显示图例，屏蔽悬停交互
       line_trace = go.Scatter(
           x=line_pos["x"],
           y=line_pos["y"],
           mode="lines",
           line=dict(color="black", width=3, dash="dash"),
           showlegend=False,
           hoverinfo="skip"
       )
       frame.data = list(frame.data) + (line_trace,)
   

3. 补全初始画面的分割线
   动画初始画面属于全局渲染，需要把第一帧对应的分割线提前加入全局trace列表，避免打开图表时初始帧的分割线缺失：

   first_day = int(fig.frames[0].name)
   first_line_pos = split_line_store[first_day]
   fig.add_trace(go.Scatter(
       x=first_line_pos["x"],
       y=first_line_pos["y"],
       mode="lines",
       line=dict(color="black", width=3, dash="dash"),
       showlegend=False,
       hoverinfo="skip"
   ))
   

注意事项 #

• 优先用Scatter线实现分割线，不要直接用全局add_vline或布局形状对象：这类对象默认绑定全局布局，要实现帧同步需要逐帧修改每个帧的layout.shapes属性，操作复杂度远高于Scatter trace的方式。
• 分割线trace必须设置showlegend=False，避免在图例中生成多余的重复条目。
• 训练感知器时要校验分割线方程的w2系数，避免出现除零错误。

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