In primo luogo, sono abbastanza poco pratico con javascript e la sua libreria d3.js, ma ho familiarità con R. La creazione di cruscotti con Shiny è stata divertente e facile (grazie allo stackoverflow). Ora voglio espanderlo collegando elementi d3 ad esso.Collegamento javascript (d3.js) a lucido
Sto cercando fonti di informazione su come effettivamente associare javascript a Shiny (dashboard R) e spiegare cosa sta realmente accadendo.
Sfondo: Ho fatto il tutorial su js e jquery su w3schools e ho imparato (un po ') su d3 usando il libro di Scott Murray (Visualizzazione di dati interattivi per il web). Speravo che questo sarebbe sufficiente a farmi capire gli esempi e spiegazioni riguardo a come costruire attacchi di input/output personalizzati sul sito Shiny:
http://shiny.rstudio.com/articles/building-inputs.html
Ma purtroppo non e io non riesco a trova degli esempi che sono in codice di lavoro minimo. Molti esempi su github sono complessi per me da sezionare, molto probabilmente a causa della mia piccola esperienza con javascript. Ecco un esempio di input personalizzato vincolanti con javascript:
https://github.com/jcheng5/shiny-js-examples/tree/master/input
Ecco un esempio di un ingresso & uscita vincolante provo a spiegare:
<script src="http://d3js.org/d3.v3.js"></script>
<script type="text/javascript">
(function(){
// Probably not idiomatic javascript.
this.countValue=0;
// BEGIN: FUNCTION
updateView = function(message) {
var svg = d3.select(".d3io").select("svg")
svg.append("text")
.transition()
.attr("x",message[0])
.attr("y",message[1])
.text(countValue)
.each("end",function(){
if(countValue<100) {
countValue+=1;
$(".d3io").trigger("change");
}
})
}
// END: FUNCTION
//BEGIN: OUTPUT BINDING
var d3OutputBinding = new Shiny.OutputBinding();
$.extend(d3OutputBinding, {
find: function(scope) {
return $(scope).find(".d3io");
},
renderError: function(el,error) {
console.log("Foe");
},
renderValue: function(el,data) {
updateView(data);
console.log("Friend");
}
});
Shiny.outputBindings.register(d3OutputBinding);
//END: OUTPUT BINDING
//BEGIN: INPUT BINDING
var d3InputBinding = new Shiny.InputBinding();
$.extend(d3InputBinding, {
find: function(scope) {
return $(scope).find(".d3io");
},
getValue: function(el) {
return countValue;
},
subscribe: function(el, callback) {
$(el).on("change.d3InputBinding", function(e) {
callback();
});
}
});
Shiny.inputBindings.register(d3InputBinding);
//END: OUTPUT BINDING
})()
</script>
Dove "d3io" è un elemento div Nell'interfaccia utente, updateView() è una funzione. Ecco l'ui:
#UI
library(shiny)
d3IO <- function(inputoutputID) {
div(id=inputoutputID,class=inputoutputID,tag("svg","")) #; eerst zat ; erbij, maar werkt blijkbaar ook zonder
}
# Define UI for shiny d3 chatter application
shinyUI(pageWithSidebar(
# Application title
headerPanel("D3 Javascript chatter",
"Demo of how to create D3 I/O and cumulative data transfer"),
sidebarPanel(
tags$p("This widget is a demonstration of how to wire shiny direct to javascript, without any input elements."),
tags$p("Each time a transition ends, the client asks the server for another packet of information, and adds it
to the existing set"),
tags$p("I can't claim this is likely to be idiomatic javascript, because I'm a novice, but it allows d3 apps
to do progressive rendering. In real use, a more complex request/response protocol will probably be
required. -AlexBBrown")
),
mainPanel(
includeHTML("d3widget.js"),
d3IO("d3io") #Creates div element that d3 selects
)
))
Ecco il file server:
# SERVER
library(shiny)
# Define server logic required to respond to d3 requests
shinyServer(function(input, output) {
# Generate a plot of the requested variable against mpg and only
# include outliers if requested
output$d3io <- reactive(function() {
if (is.null(input$d3io)) {
0;
} else {
list(rnorm(1)*400+200,rnorm(1)*400+200);
}
})
})
Domande specifiche:
1) La server.r sembra per ricevere input chiamato "d3io" (ingresso $ d3io) poiché non è definito in ui.r, ho pensato che debba provenire dal file javascript. A quale elemento si riferisce effettivamente?
2) Ho difficoltà a capire la parte personalizzata di rilegatura:
var d3OutputBinding = new Shiny.OutputBinding();
$.extend(d3OutputBinding, {
find: function(scope) {
return $(scope).find(".d3io");
},
renderError: function(el,error) {
console.log("Foe");
},
renderValue: function(el,data) {
updateView(data);
console.log("Friend");
}
});
Shiny.outputBindings.register(d3OutputBinding);
mia comprensione è:
Creare un nuovo outputbinding lucido, prima trovare il .d3io classe (div elemento), se l'errore allora scrivere alla console "Foe" (è questo codice speciale?), se non l'errore, allora renderValue usando la funzione updateView usando i dati (da dove riceve questo valore da?) e scrivi alla console "Friend". Infine registra l'output.
Spero che voi ragazzi potete aiutare! Sto creando un documento con le istruzioni su "Le misure necessarie per imparare come implementare javascript in lucido quando non si conosce alcun javascript", mi piacerebbe che! :)
Cheers, lungo
+1 su "I passi necessari per imparare come implementare javascript in lucido quando non si conosce alcun javascript" – Vincent
Sei ancora interessato a una guida su come scrivere associazioni personalizzate incl. d3.js? – BigDataScientist