【发布时间】：2014-12-26 08:24:29
【问题描述】：
首先，我不太熟悉 javascript 及其库 d3.js，但我熟悉 R。使用 Shiny 创建仪表板既有趣又简单（感谢 stackoverflow）。现在我想通过将 d3 元素连接到它来扩展它。
我正在寻找有关如何将 javascript 实际绑定到 Shiny（R 仪表板）的信息源并解释实际发生的情况。
背景： 我在 w3schools 上完成了关于 js 和 jquery 的教程，并使用 Scott Murray 的书（Web 的交互式数据可视化）了解了（一点）d3。我希望这足以让我理解有关如何在 Shiny 网站上构建自定义输入/输出绑定的示例和说明：
http://shiny.rstudio.com/articles/building-inputs.html
但不幸的是，我没有，而且我似乎找不到任何使用最少工作代码的示例。 github 上的许多示例对我来说太复杂了，很可能是因为我对 javascript 的经验很少。以下是使用 javascript 进行自定义输入绑定的示例：
https://github.com/jcheng5/shiny-js-examples/tree/master/input
这是我尝试展开的输入和输出绑定示例：
<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>
其中“d3io”是 ui 中的一个 div 元素，updateView() 是一个函数。这是用户界面：
#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
)
))
这是服务器文件：
# 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);
}
})
})
具体问题：
1) server.r 似乎获得了名为“d3io”(input$d3io) 的输入，因为这没有在 ui.r 中定义，我推断它必须来自 javascript 文件。它实际上指的是哪个元素？
2) 我无法理解自定义绑定部分：
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);
我的理解是：
创建一个新的闪亮输出绑定，首先找到类 .d3io（div 元素），如果错误则写入控制台“Foe”（这是特殊代码吗？），如果没有错误则使用函数 updateView 使用数据渲染值（在哪里它是否从那里接收此值？）并写入控制台“朋友”。最后注册输出。
希望大家帮忙！我正在创建一个文档，其中包含“在您不知道任何 javascript 时学习如何将 javascript 实现为闪亮的必要步骤”的步骤，我会喜欢的！:)
干杯， 长
【问题讨论】：
-
+1 on“当你不知道任何 javascript 时，学习如何将 javascript 实现为闪亮的必要步骤”
-
您是否仍然对如何编写自定义绑定的指南感兴趣，包括。 d3.js?
标签： javascript r d3.js shiny