多次按下“-”時，重置按鈕以隨機大小重置svg

在下面閃亮的應用程式中，我對 svg 檔案進行了縮放和重置。正如您在gif 中看到的， 如果您連續快速單擊按鈕，腳本似乎會丟失跟蹤并隨機調整大小？在 gif 中，我-反復單擊按鈕，然后在最后按重置。

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/[email protected]/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)  

uj5u.com熱心網友回復：

這與我第一次遇到的奇怪錯誤相同。一個可能的解決方案是將腳本放在 renderUI 中：

library(shiny)
library(shinyWidgets)
library(DiagrammeR)
library(magrittr)

js <- '
  var element = document.getElementById("grr");
  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/[email protected]/dist/panzoom.min.js")
  ),
  
  uiOutput("main")
)

server <- function(input, output) {
  
  output$main <- renderUI({
    tagList(
      div(
        grVizOutput("grr", width = "100%", height = "90vh"),
        
        actionGroupButtons(
          inputIds = c("zoomout", "zoomin", "reset"),
          labels = list(icon("minus"), icon("plus"), "Reset"),
          status = "primary"
        )
      ),
      tags$script(HTML(js))
    )
    
  })
  
  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)

標籤：r 闪亮的 缩放

上一篇：比較兩個向量，如果整數只在向量中出現一次，則只匹配一次

下一篇：多列寬到長