如何在使用svg-pan-zoom的R包中添加svg-pan-zoom-rotate JS库？

一、替换原svg-pan-zoom依赖并引入新库 #

1. 准备JS文件
   下载svg-pan-zoom-rotate编译好的最小化JS文件，将其放在Shiny项目的www目录下（若没有该目录则新建）。

2. 移除原库依赖并引入新库
   在Shiny的UI部分，通过tags$head()引入新的JS文件，同时确保原svg-pan-zoom的JS不会被加载：

   ui <- fluidPage(
     tags$head(
       # 引入svg-pan-zoom-rotate
       tags$script(src = "svg-pan-zoom-rotate.min.js")
     ),
     # 你的SVG元素
     tags$svg(id = "target-svg", ...)
   )
   

   若原R包通过htmlDependency自动加载了svg-pan-zoom，可通过自定义htmlDependency覆盖：

   custom_dep <- htmltools::htmlDependency(
     name = "svg-pan-zoom-rotate",
     version = "1.0.0", # 对应你下载的库版本
     src = c(file = "www"),
     script = "svg-pan-zoom-rotate.min.js"
   )
   
   ui <- fluidPage(
     custom_dep,
     tags$svg(id = "target-svg", ...)
   )
   

3. 修改SVG交互初始化代码
   svg-pan-zoom-rotate基于原库扩展，初始化API基本兼容，但新增了旋转相关配置与方法。在Shiny中通过自定义JS初始化：

   ui <- fluidPage(
     custom_dep,
     tags$svg(id = "target-svg", ...),
     tags$script(HTML("
       // 初始化svg-pan-zoom-rotate
       var panZoomInstance = svgPanZoom(document.getElementById('target-svg'), {
         controlIconsEnabled: true, // 启用控制图标，包含旋转按钮
         zoomEnabled: true,
         panEnabled: true
       });
       
       // 示例：添加自定义旋转按钮事件
       document.getElementById('rotate-btn').addEventListener('click', function() {
         panZoomInstance.rotate(90); // 顺时针旋转90度
       });
     "))
   )
   

4. R与JS的旋转交互（可选）
   若需从R端控制SVG旋转，可通过Shiny的消息机制实现：

   • JS端添加消息处理器：

     Shiny.addCustomMessageHandler("rotate-svg", function(degrees) {
       panZoomInstance.rotate(degrees);
     });
     

   • R端触发旋转：

     observeEvent(input$rotate_btn, {
       session$sendCustomMessage("rotate-svg", 90)
     })
     

二、Require.js加载示例404的替代方案 #

原仓库的demo/require.html已不存在，可直接参考Require.js官方配置方式加载svg-pan-zoom-rotate：

1. 下载Require.js的脚本文件到项目的www目录，然后在UI中引入：

   tags$script(src = "require.min.js")
   

2. 配置Require.js并加载库：

   require.config({
     paths: {
       "svg-pan-zoom-rotate": "svg-pan-zoom-rotate.min" // 指向www目录下的文件
     }
   });
   
   require(["svg-pan-zoom-rotate"], function(svgPanZoom) {
     var panZoomInstance = svgPanZoom(document.getElementById('target-svg'));
   });
   

内容的提问来源于stack exchange，提问作者Sophie Blanc