Создание различных интерактивных событий в приложении Div в приложении Shiny

Question

У меня есть очень простое приложение Shiny, как показано ниже -

library(shiny)
ui <- fluidPage(
  div(id = "01", style = "cursor:pointer; height: 300px; width: 300px; text-align: center; background-color: green", HTML("01")),
  div(id = "02", style = "cursor:pointer; height: 300px; width: 300px; text-align: center; background-color: blue", HTML("02")),
  div(id = "03", style = "cursor:pointer; height: 300px; width: 300px; text-align: center; background-color: red", HTML("03")),

  plotOutput("plot")
)

shinyApp(ui, server = function(input, output) { })
}

. В этой структуре я хочу добиться интерактивного события в течение трех divs, при которых щелчок по первому div сгенерирует cdf plot of Normal distribution, 2-й div сгенерирует t distribution, а 3-й сгенерирует GED distribution.

Я могу использовать drop-down box et c. чтобы достичь того же, я также могу использовать 3 разных plotOutput() для каждого деления. Однако в моем нынешнем случае у меня слишком много таких divs, поэтому было бы невозможно иметь так много индивидуальных plotOutput(). Так что я хочу иметь такую ​​функциональность через отдельный divs с одним выходом.

Есть ли способ добиться того же в Shiny? Любой указатель будет высоко оценен.

Answer 1

В соответствии с @bretauv shinyjs имеет функцию onclick, так что вы должны сделать следующее, обратите внимание, что вы должны предоставить участки с распределениями. Я просто делаю изменения с обычным

library(shiny)
library(shinyjs)

ui <- fluidPage(
    useShinyjs(),  # Set up shinyjs
    column(3,
           div(id = "01", style = "cursor:pointer; height: 300px; width: 300px; text-align: center; background-color: green", HTML("01")),
           div(id = "02", style = "cursor:pointer; height: 300px; width: 300px; text-align: center; background-color: blue", HTML("02")),
           div(id = "03", style = "cursor:pointer; height: 300px; width: 300px; text-align: center; background-color: red", HTML("03")),
    ),
    column(9,
           plotOutput("plot")
    )
)

v <- reactiveValues()

normal <- function(v){
    v$x <- seq(-10, 10, by = .1)
    v$y <- rnorm(v$x)
    v$title <- "Normal distribution"
}

tdistr <- function(v){
    v$x <- seq(-10, 10, by = .1)
    v$y <- rnorm(v$x)
    v$title <- "T-distribution"
}

geddistr <- function(v){
    v$x <- seq(-10, 10, by = .1)
    v$y <- rnorm(v$x)
    v$title <- "GED distribution"
}

server = function(input, output,session) { 

    observe({
        onclick("01",normal(v))
        onclick("02",tdistr(v))
        onclick("03",geddistr(v))
    })

    output$plot <- renderPlot({
        req(v$x)
        plot(v$x,v$y,main = v$title)
    })

}

shinyApp(ui, server)