Tengo la aplicación brillante a continuación en la que uso js para agregar controles para hacer zoom y restablecer en un archivo svg . Estaba funcionando hasta el momento en que puse la salida dentro de otro UiOutput.
library(shiny) library(shinyWidgets) library(DiagrammeR) library(magrittr) js <- ' $(document).ready(function(){ var element = document.getElementById("grr"); var instance = panzoom(element); var z = 1; $("#zoomout").on("click", function(){ instance.smoothZoom(0, 0, 0.9); z *= 0.9; }); $("#zoomin").on("click", function(){ instance.smoothZoom(0, 0, 1.1); z *= 1.1; }); $("#reset").on("click", function(){ instance.smoothZoom(0, 0, 1/z); z = 1; }); $("#zoomout").on("dblclick", function(){ return false; }); $("#zoomin").on("dblclick", function(){ return false; }); }); ' ui <- fluidPage( tags$head( tags$script(src = "https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"), tags$script(HTML(js)) ), uiOutput("main") #grVizOutput("grr", width = "100%", height = "90vh"), ) server <- function(input, output) { output$main <- renderUI({ div( grVizOutput("grr", width = "100%", height = "90vh"), actionGroupButtons( inputIds = c("zoomout", "zoomin", "reset"), labels = list(icon("minus"), icon("plus"), "Reset"), status = "primary" ) ) }) output$grr <- renderGrViz(render_graph( create_graph() %>% add_n_nodes(n = 2) %>% add_edge( from = 1, to = 2, edge_data = edge_data( value = 4.3 ) ) )) } shinyApp(ui, server)Esto se debe a que los elementos definidos en renderUI aún no están listos cuando el documento está listo. Una posible técnica es utilizar un intervalo que "filtrará" el documento cada 100 ms, hasta que encuentre el elemento.
library(shiny) library(shinyWidgets) library(DiagrammeR) library(magrittr) js <- ' $(document).ready(function(){ var instance; var myinterval = setInterval(function(){ var element = document.getElementById("grr"); if(element !== null){ clearInterval(myinterval); instance = panzoom(element); } }, 100); var z = 1; $("body").on("click", "#zoomout", function(){ instance.smoothZoom(0, 0, 0.9); z *= 0.9; }); $("body").on("click", "#zoomin", function(){ instance.smoothZoom(0, 0, 1.1); z *= 1.1; }); $("body").on("click", "#reset", function(){ instance.smoothZoom(0, 0, 1/z); z = 1; }); $("body").on("dblclick", "#zoomout", function(){ return false; }); $("body").on("dblclick", "#zoomin", function(){ return false; }); }); ' ui <- fluidPage( tags$head( tags$script(src = "https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js"), tags$script(HTML(js)) ), uiOutput("main") #grVizOutput("grr", width = "100%", height = "90vh"), ) server <- function(input, output) { output$main <- renderUI({ div( grVizOutput("grr", width = "100%", height = "90vh"), actionGroupButtons( inputIds = c("zoomout", "zoomin", "reset"), labels = list(icon("minus"), icon("plus"), "Reset"), status = "primary" ) ) }) output$grr <- renderGrViz(render_graph( create_graph() %>% add_n_nodes(n = 2) %>% add_edge( from = 1, to = 2, edge_data = edge_data( value = 4.3 ) ) )) } shinyApp(ui, server)