自定义输出闪亮

Question

我正在尝试将 R 中呈现的热图和树状图连接到 InCHlib JavaScript 库，具体取决于用户通过 Shiny 的输入。为了在输入更改时更新热图，我需要编写自定义输出绑定。我研究了教程和我在网上找到的一堆示例，但不知何故我没有得到任何输出。

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 方面一直工作到 output$heatmap （如果我确实写了那个 json 文件，那个文件看起来很好）。如果我调试我的 JavaScript，我会看到加载了正确的数据。

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

提前致谢

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.RI 中的 heatMapOutput 中，得到一个 inputId 参数为“heatmap”，因为我的 server.R 捕获了一个 output$heatmap 变量，这个 id 也在我的 ui.R 代码中使用：heatMapOutput("heatmap")。

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

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