javascript - ggplot - interactive graphics r

R brillante AngularJS trabajando

Question

Estoy creando un tablero con R y D3 corriendo con la biblioteca (brillante).

Esto funciona maravillosamente bien y ahora quiero convertir el código D3 en objetos modulares que me ahorrarán mucha codificación y la podrán usar otros. Mi idea es llegar a esto:

<r-d3-gauge id="G1" data="[1,2,3]"></r-d3-gauge>
<r-d3-gauge id="G2" data="[4,5,6]"></r-d3-gauge>

Y tengo los dos medidores que puedo colocar con CSS o simplemente inyectarlos en brillante con HTML (....). Ok esto debería ser simple usando AngularJS.

Pero no puedo hacer que AngularJS funcione en R brillante. Hice este código de prueba: (una carpeta www con d3.js y angular.min.1.4.3.js junto a server.r / ui.r)

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

Esto crea una aplicación brillante con código html que está bien, la prueba muestra que

angular == defined
1.4.3
jQuery == defined
2.1.4

Así que no hay problema allí. jQuery funciona bien (puede hacer clic en "Ingresar algo en el cuadro de entrada:" y está oculto) pero si ingreso texto, no aparece. Si intento algo como:

<p>Name: <input type="text" ng-model="name2"></p>
<p>You wrote: {{ name2 }}</p> 

se mostrará. Escribiste: {{name2}} sin subconjunto de la parte de {{name2}}.

Answer 1

OK, esto funciona:

ui.r

library(shiny)
shinyUI(bootstrapPage(includeHTML("static.html")))

server.r

library(shiny)
shinyServer(function(input, output) {})

static.html

<script src="d3.js"></script>
<script src="angular.min.1.4.3.js"></script>
<script language=''JavaScript''>
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","")
</script>
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name"></p>
<p ng-bind="name"></p>
<h4>Name: <input type="text" ng-model="name2"></h4>
<h4>You wrote: {{name2}}</h4>

Et voila, ¡listo! : ^)