如何消除R Shiny中动态渲染对象之间的大间隙？

Question

在下面的示例代码中，4 个渲染图的大小随着用户根据需要扩展或收缩窗口而变化。在下面的代码中，大小会根据 HTML 动态变化。但是，首次调用应用程序时，如何消除渲染的图与图下方的数据表之间的较大间隙？如下图所示。奇怪的是，当用户调整窗口大小后，无论窗口是展开还是收缩，这个大间隙都会消失。即使尺寸调整很小，间隙也会消失。

请帮助我消除首次渲染应用程序时的巨大差距。我的 HTML 和 CSS 技能很弱。

示例代码：

library(shiny)
library(ggplot2)
library(DT)
library(gridExtra)  

data <- data.frame(X = 1:100,Original = runif(100),Fitted = runif(100))

plotFun <- function(data, title) {
  ggplot(data, aes(x = X, y = Original)) +
    geom_point(color = "blue", size = 2) +
    geom_line(aes(y = Fitted), color = "red", linetype = "dashed") +
    ggtitle(title) +
    theme_minimal()
}

ui <- fluidPage(
  tags$script(HTML("
    $(document).on('shiny:connected', function() {
      function adjustPlotSize() {
        var width = $('#plotContainer').width();
        $('#plotContainer').height(width);
      }
      $(window).resize(adjustPlotSize);
      adjustPlotSize();
    });
  ")),
  mainPanel(
    plotOutput("plotContainer", width = "100%"), 
    DTOutput("dataTable")
  )
)

server <- function(input, output) {
  output$plotContainer <- renderPlot({
    p1 <- plotFun(data, "Plot 1")
    p2 <- plotFun(data, "Plot 2")
    p3 <- plotFun(data, "Plot 3")
    p4 <- plotFun(data, "Plot 4")
    grid.arrange(p1, p2, p3, p4, ncol = 2, nrow = 2)
  }, res = 96)
  
  output$dataTable <- renderDT({datatable(data)})
}

shinyApp(ui, server)

Answer 1

也许有一个更干净的解决方案，但目前有效的方法是在页面完全加载后使用 HTML 触发调整大小事件：

 tags$script(HTML("
    $(document).on('shiny:connected', function() {
      function adjustPlotSize() {
        var width = $('#plotContainer').width();
        $('#plotContainer').height(width);
      }
      // Schedule adjustPlotSize to execute after the page has loaded
      $(window).resize(adjustPlotSize); // Bind to resize event
      setTimeout(function() {
        adjustPlotSize(); // Adjust immediately on load
        $(window).trigger('resize'); // Trigger resize to adjust layout
      }); 
    });
  ")),