如何为Crosstalk共享数据集动态设置Plotly分组坐标轴范围

• layout() 层的坐标轴配置仅在图表初始化时执行一次，不会响应Crosstalk的过滤事件动态重算
• Plotly的公式映射语法~仅在add_trace()这类图形映射层生效，写在layout()里只会读取全量数据集的第一个xaxis_max值，切换分组时不会更新
• Plotly默认自动计算坐标轴范围时，仅统计柱状图等核心几何图层的数值范围，不会把右侧附加的文本标签位置纳入计算，因此会出现标签被截断的问题

不需要提前计算分组级别的xaxis_max字段，直接调整Plotly配置即可适配所有分组切换场景：

1. 删除layout()中写死的xaxis = list(range = c(0, ~xaxis_max[1]))配置
2. 开启x轴自动适配范围，强制x轴从0开始（符合柱状图展示规范）
3. 给文本标签增加cliponaxis = FALSE参数，允许标签绘制在坐标轴区域外不被裁剪
4. 调整绘图区右侧边距，给数值标签预留足够展示空间

修改后的完整绘图代码如下：

plot_ly(data = my_tibble_shared, hoverinfo = "none") %>% 
  layout(
    xaxis = list(
      autorange = TRUE,
      rangemode = "tozero"
    ),
    showlegend = F,
    # 右侧预留100px边距放标签，可根据数值长度调整数值
    margin = list(r = 100)
  ) %>% 
  add_trace(
    x = ~donuts_eaten,
    y = ~donut_type,
    type = "bar"
  ) %>%  
  add_text(
    x = ~donuts_eaten,
    y = ~donut_type,
    text = ~donuts_eaten,
    textposition = "right",
    textfont = list(color = "black"),
    showlegend = F,
    texttemplate = '<b> %{text:,.1d} </b>',
    cliponaxis = FALSE # 核心配置：禁止标签被坐标轴裁剪
  )

切换分组时，Plotly会自动根据当前筛选后的数据重算x轴范围，配合不裁剪配置和预留边距，所有标签都可以完整展示。

如果要求x轴上限严格等于当前分组最大值的1.5倍（不让标签出现在绘图区外的边距区域），可以增加一段JS监听Crosstalk的筛选事件，动态更新坐标轴范围：
首先给绘图的R代码块加自定义id，方便JS定位：

```{r donut_plot}
# 上面的绘图代码放这里，不需要改
```

然后把原来的JS初始化块替换为以下内容：

$(document).ready(function() {
  // 默认选中team1
  document.getElementById("group").getElementsByClassName("selectized")[0].selectize.setValue("team 1", false);
  
  const plotDiv = document.getElementById("donut_plot");
  // 每次图表重绘（含筛选切换）后更新x轴范围
  plotDiv.on('plotly_afterplot', function() {
    // 取当前柱状图显示的所有x值
    const currentValues = plotDiv.data[0].x;
    const xMax = 1.5 * Math.max(...currentValues);
    // 更新x轴范围
    Plotly.relayout(plotDiv, {'xaxis.range': [0, xMax]});
  });
});

这个方案会在每次筛选切换、图表重绘完成后，自动读取当前显示数据的最大值，按1.5倍计算x轴上限，完全匹配动态适配需求。

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