绑定的JavaScript（d3.js）shiny
首先，我对JavaScript和它的库d3.js相当不熟悉，但是我对R很熟悉。使用Shiny创build仪表板非常有趣和简单（感谢stackoverflow）。 现在我想通过连接d3元素来扩展它。
我正在寻找信息来源，关于如何实际绑定到shiny（R仪表板）的JavaScript和解释实际发生了什么。
背景：我在w3schools上做了关于js和jquery的教程，并且使用Scott Murray的书（交互式数据可视化为web）了解了d3。 我希望这足以让我理解有关如何在Shiny网站上构build自定义input/输出绑定的示例和解释：
http://shiny.rstudio.com/articles/building-inputs.html
但不幸的是，我没有，我似乎无法find任何在最小工作代码的例子。 github上的很多例子对于我来说很复杂，很可能是因为我对javascript的一点经验。 以下是使用javascript自定义input绑定的示例：
https://github.com/jcheng5/shiny-js-examples/tree/master/input
下面是我尝试展开的一个input和输出绑定的示例：
<script src="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：
#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）的input，因为这没有在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);
我的理解是：
创build一个新的shiny的输出绑定，首先find类.d3io（div元素），如果错误然后写入控制台“仇敌”（这是特殊的代码？），如果不是错误然后renderValue使用函数updateView使用数据这个值来自？）并写入控制台“Friend”。 最后注册输出。
希望你们能帮忙！ 我正在创build一个文档，其步骤是：“当你不知道任何JavaScript时，学习如何将JavaScript实现为有光泽的必要步骤”，我很乐意！
欢呼，长
嗨Sweetbabyjesus（很好玩）。 你有两个问题：
1）server.r似乎得到称为“d3io”（input$ d3io）的input，因为这没有在ui.r中定义，我推断它必须来自JavaScript文件。 它实际上涉及哪个元素？
该短语input$d3io具有以下组件：
-
input是一个传递给函数的参数 – 它是一个列表，用于存储应用程序中所有小部件的当前值。 -
$是成员select器。 -
d3io在UI的mainPanel中引用具有该id的div元素（'d3IO（“d3io”）“）的内容。
2）我无法理解自定义绑定部分：
var d3OutputBinding = new Shiny.OutputBinding();
这是正确的，这创build了一个Shiny.OutputBinding的实例，并将其分配给variablesd3OutputBinding。
$.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"); } });
这段代码用三个函数find ， renderError和renderValue扩展了d3OutputBinding的行为。 这三个函数是Shiny.OutputBinding所必需的。
find是关键，因为它返回了一个元素列表，这些元素应该通过elparameter passing给两个渲染函数。 注意，它的返回元素的CSS类是“d3io” – 这是前面提到的相同的div。
请注意， extend()是jQuery JavaScript库的一个function， $在这个上下文中是jQuery对象的别名。
Shiny.outputBindings.register(d3OutputBinding);
让Shiny知道这个新configuration的对象现在应该被使用。
干杯，尼克
我要退后一步，假设你想要D3能够获得惊人的结果，但并不一定与D3有关。 本质上，我将回答这个问题：
学习如何在不知道JavaScript的情况下将JavaScript实现为Shiny的必要步骤是什么？
虽然D3function非常强大，但掌握JavaScript也是非常困难的，即使对于很多使用JavaScript的人也是如此。 虽然我爱D3，并几乎每天都使用它，但在这种情况下，我build议不要这样做。 相反，有一个名为Plotly的库，它在后台使用D3，但是专门为科学界和数据科学家构build，所以对R社区非常友好。
他们有一个彻底的教程来连接到Shiny ，甚至有一个ggplot2转换器，如果你已经熟悉了这个语法，就像R世界中的许多人一样。 除非您的需求非常不寻常，否则Plotly将可能直接在D3中提供您的需求，并且学习曲线更加友好。
你熟悉rCharts软件包吗？ 使用Shiny可以很好地工作，大部分的输出选项基于D3变体。 两个 例子 。
工作很忙，我没有机会发表。 请注意，这是一个解决方法，使用customMessageHandler（而且我不使用自定义input/输出绑定）。 开始：
目标：从数据框发送数据以使用customMessageHandler创build一个D3JS树。
path：我已经设法将data.frame格式的数据发送到d3js树。 点击actionbutton后，它将数据框中的数据更改为JSON格式，然后将其发送到创build树的js文件。 树的数据在“server.r”上被硬编码。
代码在哪里？ 在我的github！ https://github.com/SweetBabyJesus/shiny-d3js-simple-binding
原文：我创build了一个基于CHAID的树algorithm来创build大数据集的见解。 人们可以将他们的csv上传到仪表板，然后吐出d3js树:)代码是有点冗长，因此我把它砍下来，并创build了一个最小的代码示例。
希望你喜欢。
欢呼，长
