闪亮的actionButton()输出在htmlWidgets的onRender()函数中

Question

我的目标是创建一个脚本，最初显示一个空白的图形。如果用户单击一个闪亮的actionButton，上面写着“添加点”，那么点将通过htmlWidgets的onRender()函数添加到图形中。这将是有效的，因为当用户选择闪亮的actionButton时，不需要重新绘制背景空白图形。

但是，为了实现这一点，我需要找到一种方法，将闪亮的actionButton中的变化直接指示为onRender()函数，这样就不会修改空白的图形(在下面的代码中称为"pP")。我在下面的onRender()代码中将两行注释作为if语句，以显示我的目标。

我知道有一个名为Shiny.onInputChange(“变量”，变量)的函数可以在onRender()函数中调用，以保存在onRender()中创建的变量，这样就可以像onRender()函数之外的闪亮输入一样使用它。因此，我想我是在寻找相反的东西(将一个闪亮的输入值直接传输到onRender()函数中)。

ui <- shinyUI(fluidPage(
  uiOutput("add"),
  plotlyOutput("myPlot", height = 700)
))

server <- shinyServer(function(input, output) {

  output$add <- renderUI({
    actionButton("addButton", "Add points")
  })

  output$myPlot <- renderPlotly({
    p <- ggplot(mtcars, aes(x = wt, y = mpg)) + geom_blank()
    pP <- ggplotly(p)

    pP %>% onRender("
    function(el, x, data) {

//if (input$addButton selected){
      var Traces = [];
      var trace = {
      x: data.x,
      y: data.y,
      mode: 'markers',
      marker: {
      color: 'green',
      size: 6
      },
      hoverinfo: 'none'
      };
      Traces.push(trace);
      Plotly.addTraces(el.id, Traces);
//}
    }", data = list(x = mtcars$wt, y = mtcars$mpg))
  })      
})

shinyApp(ui, server)

注意:这类似于我之前问过的一个问题(Using Shiny actionButton() function in onRender() function of htmlWidgets)。然而，我简化了这个问题，并希望确定是否有一个简单的答案可以得到。

Answer 1

您可以尝试直接使用一些jQuery，以响应用户单击按钮。onRender将是：

function(el, x, data) {
  $('#addButton').on('click',function() {
    var Traces = [];
    var trace = {
      x: data.x,
      y: data.y,
      mode: 'markers',
      marker: {
        color: 'green',
        size: 6
      },
      hoverinfo: 'none'
    };
    Traces.push(trace);
    Plotly.addTraces(el.id, Traces);
  })
}

为此，需要首先创建按钮，因此我将ui.R更改为：

ui <- shinyUI(fluidPage(
  actionButton("addButton", "Add points"),
  plotlyOutput("myPlot", height = 700)
))

编辑:如果您想保留renderUI，可以使用事件委托来绑定#add div中的函数按钮：

function(el, x, data) {
  $('#add').on('click','button',function() {
    var Traces = [];
    var trace = {
      x: data.x,
      y: data.y,
      mode: 'markers',
      marker: {
        color: 'green',
        size: 6
      },
      hoverinfo: 'none'
    };
    Traces.push(trace);
    Plotly.addTraces(el.id, Traces);
  })
}