我正在尝试将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,我会看到正确的数据被加载。
我不觉得我完全理解自定义输出绑定机制。如果有人能指出我正确的方向,那将是一个很大的帮助。
先谢谢
答案 0 :(得分:0)
找到了一个有效的解决方案:
首先,如果您的数据是如上所述的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中解决?