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! : ^)