javascript - RStudio Shiny 和 JavaScript 通信问题

Question

我想制作一个 Shiny 应用程序，它可以生成与所选数据库长度一样多的 HTML div 对象，但 Shiny 和 JavaScript 之间可能存在通信问题。

我尝试使用 Shiny.addCustomMessageHandler 但它似乎只在函数内发送信息。我的目标是将 msg 变量值修改为 ncol(database() )

这是一个最小的例子:

服务器.r

library(shiny)

shinyServer(
function(input, output, session) {
   database <- reactive({
      get(input$database)
    })

   observe({
     session$sendCustomMessage(type = 'testmessage', message = ncol(database()))
   })
})

ui.r

library(shiny)

shinyUI(fluidPage(
  tags$head(tags$script(src="script.js")),

  fluidRow(
  # TITLE
  titlePanel("title"),

  # SIDEBAR
  sidebarPanel(width = 2,
      selectInput("database", "Select sample database:", choices = c("mtcars","iris","Titanic","AirPassengers"))
    )
  ),

  # MAIN-PANEL
  column(width = 8,  
    tabsetPanel(type = "pills",  
       tabPanel("view",        
           tags$div(id="target")
        )
  ))
))

script.js

$(document).on('shiny:connected', function(event) {

          var msg;
            Shiny.addCustomMessageHandler("testmessage",
              function(message) {
                msg = message;                                      
              }
            );

          for(var i =1; i<= msg; i++){
             $('#target').append($('<div/>', { id: 'targ' + i, 'class' : 'col-md-4'}))
          }
}); 

感谢您的建议!

更新1:

当我生成这样的图时:

$(document).ready(function() {
    Shiny.addCustomMessageHandler("testmessage",
    function(message) {
      updateTargetDiv(message);
    }
    );
});

function updateTargetDiv(msg){
      node = document.getElementById('target');
      while (node.hasChildNodes()) {
          node.removeChild(node.lastChild);
      }
      for(var i =1; i<= msg; i++){
         $('#target').append($('<div/>', { id: 'targ' + i, 'class' : 'col-md-4'}));
      }

            for(var i =1; i<= msg; i++){
                 $('#targ' + i).append($('<div/>', { id: 'plot' + i, 'class' : 'col-md-3 shiny-plot-output'}))
                 $('#targ' + i).append($('<div/>', { id: 'summary' + i, 'class' : 'col-md-1 shiny-html-output'}))
            }
}

服务器.r

observe({
      for (i in 1:ncol(database())) {
        local({
            my_i = i
            output[[paste0('plot',i)]]  <- renderPlot({
              db = database()
              ggplot(data = db, 
                     aes_string(colnames(db)[my_i])) +
              geom_histogram()
            }) 

            output[[paste0('summary',i)]]  <- renderTable({
              db = database()
              mat = matrix(NA,6,2)
              mat[,1] = names(summary(db[,my_i]))
              mat[,2] = summary(db[,my_i])
              mat
            }, include.colnames=FALSE)
        })
      }
    })

我看不到任何情节。为什么？ (无需 JavaScript 动态 div 脚本即可工作)

Answer 1

根据您的描述，我认为主要问题是您只调用一次 JavaScript 函数。 .on('shiny:connected' ... 在开始时仅调用一次。

另一个问题是，您只向目标 div 添加内容，因此除非您清除其子 div 元素，否则它将继续增长。

我认为下面的代码可以满足您的需求。它创建 CustomMessageHandler 一次，并在每次传入新值时调用 updateTargetDiv。它还会在创建新值之前从目标中清除子 div 元素。

$(document).ready(function() {
  Shiny.addCustomMessageHandler("testmessage",
    function(message) {
      updateTargetDiv(message);
    }
  );
});

function updateTargetDiv(msg){
      node = document.getElementById('target');
      while (node.hasChildNodes()) {
          node.removeChild(node.lastChild);
      }
      for(var i =1; i<= msg; i++){
         $('#target').append($('<div/>', { id: 'targ' + i, 'class' : 'col-md-4'}));
      }
}

视觉效果: