Question

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

ui.R

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

server.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，我会看到正确的数据被加载。

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

先谢谢

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
           });

target元素包含它将显示的HTML元素的id。但是在HeatMapBut.R中的heatMapOutput中，我获得了一个＆＃34; heatmap＆＃34;的inputId参数。因为我的server.R捕获了一个输出$ heatmap变量，这个id也在我的ui.R代码中使用：heatMapOutput（＆＃34; heatmap＆＃34;）。

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

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

自定义输出有光泽

1 个答案: