javascript - Shiny 的自定义输出

Question

我正在尝试根据通过 Shiny 的用户输入，将在 R 中渲染的热图和树状图连接到 InCHlib JavaScript 库。为了在输入更改时更新热图，我需要编写自定义输出绑定(bind)。我已经研究了本教程和在网上找到的一堆示例，但不知何故我没有得到任何输出。

ui.R

library(shiny)
soucre("HeatMapBinding.R")
shinyUI(
   fluidPage(
   ...
       mainPanel(           
           heatMapOutput("heatmap")
       )        
   )
)

服务器.R

source("InCHlibUtils.R")
shinyServer(function(input, output, session) {
output$heatmap <- reactive({

    if(input$get == 0)
        return()

    isolate({
        data <- retrieveData()
        hc.row <- hclust(dist(data), input$cluster.method)
        hc.col <- hclust(dist(t(data)), input$cluster.method)
        map <- InCHlib(hc.row, hc.col, data)})   # Nested List, JSON ready
        # How I previously wrote the data to a file in the correct JSON format
        # for the javascript library to pick up later. This was of course not dynamic
        # writeLines(toJSON(map), "heatmap.json")
    })
})

HeatMapBinding.R

library(shiny)
heatMapOutput <- function(inputId, width="1000px", height="1200px") {
    style <- sprintf("width: %s; height: %s;", validateCssUnit(width), validateCssUnit(height))

    tagList(
        singleton(tags$head(
                        tags$script(src="scripts/jquery-2.0.3.min.js"),
                        tags$script(src="scripts/kinetic-v5.0.0.min.js"),
                        tags$script(src="scripts/inchlib-1.0.0.js"),
                        tags$script(src="scripts/heatmap.js")
                )),
        div(id=inputId, class="InCHlib-heatmap", style=style,
                tag("div", list())
        )
    )
}

heatmap.js

(function() {
    var binding = new Shiny.OutputBinding();

    binding.find = function(scope) {
        return $(scope).find(".InCHlib-heatmap");
    };

    binding.renderValue = function(el, data) {
       var $el = $(el);

       // Original javascript that worked stand alone
       $(document).ready(function() { //run when the whole page is loaded
           window.inchlib = new InCHlib({ //instantiate InCHlib
               target: "inchlib", //ID of a target HTML element
               metadata: false, //turn off the metadata 
               max_height: 1200, //set maximum height of visualization in pixels
               width: 1000, //set width of visualization in pixels
               heatmap_colors: "Greens", //set color scale for clustered data
               metadata_colors: "Reds", //set color scale for metadata
           });
           // originaly a file was loaded, now i want to load the data(frame)
           // inchlib.read_data_from_file(heatmap.json)  //read input json file
           if(data != null){
               inchlib.read_data(data);                  //read input json data?
               inchlib.draw();                           //draw cluster heatmap
           }
       };  
   };  

  //Tell Shiny about our new output binding 
  Shiny.outputBindings.register(binding, "shinyjsexamples.InCHlib-heatmap");

})();

如果我没记错的话，我不需要在 server.R 中定义 renderHeatMap 函数，因为我的数据已经准备好 JSON 了？

当我调试 JavaScript heatmap.js 时，当没有可用数据时，页面加载后会立即调用 renderValue 函数。这是该函数唯一一次被调用。我知道 R 方面的工作直到输出 $heatmap 为止(如果我确实编写了该 json 文件，该文件看起来不错)。如果我调试 JavaScript，我会看到正确的数据被加载。

我觉得我没有彻底理解自定义输出绑定(bind)机制。因此，如果有人能指出我正确的方向，那将是一个很大的帮助。

提前致谢

Answer 1

找到了可行的解决方案:

首先，如果您的数据像上面提到的那样准备好 JSON，那么您确实不需要 HeatMapBinding.R 中的 renderHeatMap 类函数。

上面的问题更多的是 HTML 问题:

在 heatmap.js 中，我们按如下方式初始化 InCHlib 热图:

   window.inchlib = new InCHlib({ //instantiate InCHlib
               target: "inchlib", //ID of a target HTML element
               metadata: false, //turn off the metadata 
               max_height: 1200, //set maximum height of visualization in pixels
               width: 1000, //set width of visualization in pixels
               heatmap_colors: "Greens", //set color scale for clustered data
               metadata_colors: "Reds", //set color scale for metadata
           });

目标元素体现了它将显示的 HTML 元素的 id。但是在 HeatMapBinding.R 的 heatMapOutput 中，我得到了一个“heatmap”的 inputId 参数，因为我的 server.R 捕获了一个输出 $heatmap 变量，这个 id 也在我的 ui.R 代码中使用:heatMapOutput("heatmap")。

只需更改 heatmap.js 中的目标元素即可解决问题。

但这显然是一种解决方法，而不是通用解决方案。我是否应该在 HeatMapBinding.R 中创建一个 renderHeatMap 之类的函数来传递 inputId(我如何能够从该函数中访问该 id？)并在初始化我的 InCHlib 热图时使用它，或者这是我应该考虑的问题在InCHlib的JavaScript中解决？