我正在创建一个仪表板,其中 R 和 D3 与库(闪亮)一起运行。
这工作得非常好,现在我想将 D3 代码转换为模块化对象,这将节省我大量的编码并使其可供其他人使用。我的想法是做到这一点:
<r-d3-gauge id="G1" data="[1,2,3]"></r-d3-gauge>
<r-d3-gauge id="G2" data="[4,5,6]"></r-d3-gauge>
我有两个仪表,我可以使用 CSS 定位它们,或者只是使用 HTML 将它们注入闪亮的(....)。好吧,使用 AngularJS 应该很简单。
但我无法让 AngularJS 在 R 中工作。
我做了这个测试代码:
(www 文件夹,其中 server.r/ui.r 旁边有 d3.js 和 angular.min.1.4.3.js)
ui.r
library(shiny)
shinyUI(fluidPage(
tags$head(tags$script(src = "d3.js"))
,tags$head(tags$script(src = "angular.min.1.4.3.js"))
,htmlOutput("JS")
,htmlOutput("HTML")
))
server.r
library(shiny)
shinyServer(function(input, output) {
# HTML
output$HTML <- renderUI({
html <- ''
html <- paste0(html,'
<p>Input something in the input box:</p>
<h4>Name: <input type="text" ng-model="name"></h4>
<h4 ng-bind="name"></h4>
<h4>Name: <input type="text" ng-model="name2"></h4>
<h4>You wrote: {{name2}}</h4>
')
HTML(html)
})
# JS
output$JS <- renderUI({
html <- "<script language='JavaScript'>"
html <- paste0(html,'
if(typeof angular == "undefined") {
console.log("angular == undefined");
} else {
console.log("angular == defined");
console.log(angular.version.full)
}
if (window.jQuery) {
console.log("jQuery == defined");
console.log(jQuery.fn.jquery);
} else {
console.log("jQuery == undefined");
}
d3.select("body")
.attr("ng-app","")
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>')
HTML(html)
})
})
这创建了一个闪亮的应用程序,其 html 代码很好,测试表明
angular == defined
1.4.3
jQuery == defined
2.1.4
所以没有问题。 jQuery 工作正常(您可以单击“在输入框中输入内容:”,它会被隐藏),但如果我输入文本,它不会显示。如果我尝试类似的事情:
<p>Name: <input type="text" ng-model="name2"></p>
<p>You wrote: {{ name2 }}</p>
它将显示 You write: {{ name2 }} 而不对 {{name 2}} 部分进行子集化。