Flexdashboard中Plotly地图与散点图联动动画异常求助

问题描述 #

• 目标：在flexdashboard中实现两个联动动画组件：一个scattermapbox地图、一个散点图，通过滑块遍历数据中的日期戳实现同步联动
• 异常表现：用普通散点图替代地图时联动正常，但切换为scattermapbox后出现两个问题：
  • 地图完全失去动画效果
  • 下方的散点图被地图遮挡，无法显示

原因分析 #

1. scattermapbox的mapbox布局默认会占据整个容器空间，在subplot布局中会挤压下方图表的显示区域
2. 普通散点图与scattermapbox的动画帧处理逻辑存在差异，直接通过subplot合并时，地图的动画关联会丢失

解决方案 #

通过以下两点调整修复问题：

• 给地图的布局明确添加高度约束，限制其在subplot中的占比
• 手动统一两个图表的动画帧配置，确保滑块能同时触发两个组件的动画更新

修改后的完整代码 #

library(dplyr)         
library(plotly)       

# 生成测试数据
data <- expand.grid(Lat = c(46.5, 46.7, 46.8), 
                    Lon = seq(-110, -115, -0.5), 
                    Group = c("A", "B"),
                    Date = as.Date(c("24/02/2020", "25/02/2020", "26/02/2020", 
                                     "27/02/2020", "28/02/2020", "29/02/2020"), 
                                   format = "%d/%m/%Y")) %>%
  mutate(Date = as.factor(Date),
         Lat = rnorm(n(), Lat, 1),
         Lon = rnorm(n(), Lon, 1))
data <- data[sample(1:nrow(data), 50), ]
df <- data %>% mutate(Y = rnorm(n(), 0, 1))

# 构建带动画的scattermapbox地图
p1 <- data %>%
  plot_ly(lon = ~Lon, lat = ~Lat, frame = ~Date,
          type = "scattermapbox", mode = "markers") %>%
  layout(
    # 明确设置地图高度，适配subplot的50%占比
    height = 400,
    mapbox= list(style = "white-bg", sourcetype = 'raster', zoom = 4,
                 center = list(lon = -110 ,lat= 46.5),
                 layers = list(list(below = 'traces', sourcetype = "raster",
                                    source = list("https://basemap.nationalmap.gov/arcgis/rest/services/USGSImageryOnly/MapServer/tile/{z}/{y}/{x}")))))

# 构建带动画的散点图
p2 <- df %>%
  plot_ly(x = ~Group, y = ~Y, frame = ~Date, type = "scatter", mode = "markers") %>%
  layout(height = 400)

# 合并子图并配置动画
subplot(p1, p2, nrows = 2, heights = c(0.5, 0.5), titleX = TRUE) %>%
  animation_opts(1000, frame = 1100, redraw = FALSE) %>%
  animation_slider() 

关键调整说明 #

• 给p1（地图）和p2（散点图）的layout都添加了height参数，确保两者在subplot中各占一半空间，避免遮挡
• 保持两个图表的frame = ~Date配置一致，确保动画滑块能同步触发两个组件的帧更新

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