Altair时间序列图缩放时日期时间轴显示异常求助

以下几种方案可以解决你遇到的秒级缩放时X轴标签叠加、格式不合理的问题，同时保留多图同步缩放的特性：

方案1：用D3动态格式+刻度控制 #

利用D3的时间格式支持，结合刻度数量控制，让标签自动适配缩放范围且避免重叠：

zoom = alt.selection_interval(bind='scales')
dbm_timeseries = alt.Chart(df)
    .mark_circle()
    .encode(
            y=alt.Y('signal_dbm', title='RSSI (dBm)'),
            x=alt.X("datetime:T", 
                    scale=alt.Scale(zero=False), 
                    axis=alt.Axis(
                        labelAngle=-45,
                        format="%Y-%m-%d %H:%M:%S",  # 完整时间格式
                        tickCount=alt.TickCount(interval='second', min=5),  # 控制秒级刻度数量
                        labelOverlap=False  # 强制标签不重叠
                    )
                   ),
            color="host:N")
    .add_params(zoom)
    .properties(width=TIMESERIES_WIDTH)

方案2：基于缩放范围动态切换格式 #

通过判断选择的时间跨度，自动切换标签格式，不同缩放层级显示对应精度的时间：

zoom = alt.selection_interval(bind='scales')
# 判断缩放范围是否小于1分钟，决定是否显示秒
show_seconds = alt.expr(zoom.x[1] - zoom.x[0] < alt.expr.toDate('PT1M'))

dbm_timeseries = alt.Chart(df)
    .mark_circle()
    .encode(
            y=alt.Y('signal_dbm', title='RSSI (dBm)'),
            x=alt.X("datetime:T", 
                    scale=alt.Scale(zero=False), 
                    axis=alt.Axis(
                        labelAngle=-45,
                        format=alt.condition(
                            show_seconds,
                            "%H:%M:%S",  # 秒级缩放显示时分秒
                            "%Y-%m-%d %H:%M"  # 大范围显示年月日时分
                        )
                    )
                   ),
            color="host:N")
    .add_params(zoom)
    .properties(width=TIMESERIES_WIDTH)

方案3：强制秒级刻度间隔 #

直接设置秒级缩放时的刻度间隔，减少标签数量避免叠加：

zoom = alt.selection_interval(bind='scales')
dbm_timeseries = alt.Chart(df)
    .mark_circle()
    .encode(
            y=alt.Y('signal_dbm', title='RSSI (dBm)'),
            x=alt.X("datetime:T", 
                    scale=alt.Scale(zero=False), 
                    axis=alt.Axis(
                        labelAngle=-45,
                        tickInterval=alt.Interval(seconds=5),  # 每5秒显示一个刻度
                        format="%H:%M:%S"
                    )
                   ),
            color="host:N")
    .add_params(zoom)
    .properties(width=TIMESERIES_WIDTH)

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