Plotly R中下拉菜单随窗口缩放点击移位的解决方法问询

问题核心是默认的下拉菜单定位基于绘图区域（含坐标轴），窗口调整后绘图区域占比变化，导致菜单偏移。无需设置固定width，只需将菜单的定位基准改为整个图表容器即可。

修改方案 #

将updatemenus中的xanchor和yanchor设置为'paper'，此时x/y坐标是相对于整个图表容器的比例（0为边界起点，1为边界终点），与绘图区域的变化无关。

修改后的完整代码 #

library(plotly)

set.seed(123)

x <- rnorm(100)
y <- rnorm(100)

category1 <- sample(c('A', 'B', 'C'), 100, replace = TRUE)
category2 <- sample(c('X', 'Y', 'Z'), 100, replace = TRUE)

data <- data.frame(x, y, category1, category2)

plot_ly(data, x = ~x, y = ~y, type = 'bar',
        transforms = list(
          list(
            type = 'filter',
            target = ~category1,
            operation = '=',
            value = unique(data$category1)[1]),
          list(
            type = 'filter',
            target = ~category2,
            value = unique(data$category2)[1]))) %>% 
  layout(
    title = 'temp',
    updatemenus = list(
      list(
        type = 'dropdown',
        x = 0.05, xanchor = 'paper',  # 切换为容器基准定位
        y = 1.1, yanchor = 'paper',
        buttons = apply(as.data.frame(unique(data$category1)), 1,
                        function(x) list(method = 'restyle',
                                         args = list('transforms[0].value', x),
                                         label = x))),
      list(
        type = 'dropdown',
        x = 0.4, xanchor = 'paper',   # 切换为容器基准定位
        y = 1.1, yanchor = 'paper',
        buttons = apply(as.data.frame(unique(data$category2)), 1,
                        function(x) list(method = 'restyle',
                                         args = list('transforms[1].value', x),
                                         label = x)))))

关键修改说明 #

• xanchor='paper'：将x轴定位基准从绘图区域切换为整个图表容器，x值0对应容器最左侧，1对应最右侧
• yanchor='paper'：将y轴定位基准切换为整个图表容器，y值1对应容器最顶部
• 调整x的具体数值（如0.05、0.4）可以让菜单保持在容器内的合适位置，窗口缩放时位置比例不变

这样设置后，图表依然能自适应屏幕宽度，下拉菜单也不会随坐标轴移位。

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