将javascript（d3.js）绑定到

首先，我对javascript及其库d3.js相当不熟悉，但我对R很熟悉。使用Shiny创建仪表盘既有趣又简单（多亏了stackoverflow）。现在我想通过连接d3元素来扩展它

我正在寻找关于如何将javascript实际绑定到Shiny（R dashboard）并解释实际情况的信息源

背景： 我在w3schools上做了关于js和jquery的教程，并使用Scott Murray的书（web交互式数据可视化）学习了（一点）d3。我希望这足以让我理解有关如何在Shining网站上构建自定义输入/输出绑定的示例和说明：

但不幸的是，我没有，而且我似乎找不到任何在最小工作代码中的示例。github上的许多示例对于我来说都非常复杂，很可能是因为我对javascript的经验很少。以下是使用javascript进行自定义输入绑定的示例：

以下是我尝试展开的输入和输出绑定示例：

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

我的理解是：

创建一个新的输出绑定，首先查找class.d3io（div元素），如果出错，则写入控制台“Foe”（这是特殊代码吗？），如果没有错误，则使用函数updateView using data呈现值（它从哪里接收此值？），并写入控制台“Friend”。最后是寄存器输出

希望你们能帮忙！我正在创建一个文档，其中包含“学习如何在您不懂任何javascript的情况下将javascript实现到shiny中的必要步骤”，我很乐意！）

干杯，

---

Long

我要退一步，假设您想要D3能够提供的惊人结果，但不一定与D3绑定。基本上，我将回答这个问题：

当您不懂JavaScript时，学习如何将JavaScript实现到Shiny中的必要步骤是什么？

虽然D3功能强大得惊人，但它也是出了名的难以掌握——即使对许多熟悉JavaScript的人来说也是如此。虽然我喜欢D3，并且几乎每天都使用它，但我建议在这种情况下不要使用它。取而代之的是一个名为的库，它在后台使用D3，但它是专门为科学界和数据科学家而建的，因此它对R社区非常友好

他们有一个，甚至有一个，如果你已经熟悉这个语法，就像R世界中的许多人一样。除非您的需求非常特殊，否则Plotly很可能会满足您的需求，就像直接在D3中写作一样，具有更友好的学习曲线。

您是否熟悉？它可以很好地与Shining配合使用，并且大多数输出选项都基于D3变体

嗨，亲爱的宝贝耶稣（说起来很有趣）。你有两个问题：

1） server.r似乎得到了名为“d3io”（input$d3io）的输入，因为这在ui.r中没有定义，我推断它必须来自javascript文件。它实际上指的是哪个元素

短语

input$d3io

包含以下组件：

• input

  是传递到函数中的参数-它是一个 存储应用程序中所有小部件的当前值

• $

  是成员选择器

• d3io

  引用具有该id的div元素的内容 （d3IO（“d3IO”））在UI的主面板中

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

没错，这将创建Shiny.OutputBinding的实例并将其分配给变量d3OutputBinding

$.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");
  }
});

这段代码使用三个函数扩展了d3OutputBinding的行为，分别是

find

、

renderError

和

renderValue

。这三个函数是Shining.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");
  }
});

find

是关键，因为它返回应通过其

el

参数传递到两个渲染函数的元素列表。注意，它返回的元素的css类是“d3io”-这与前面提到的div相同

请注意，

extend（）

是jQuery javascript库的一个函数，而此上下文中的

$

是jQuery对象的别名

Shiny.outputBindings.register(d3OutputBinding);

让Shiny知道这个新配置的对象现在应该投入使用

---

干杯，尼克

工作很忙，我还没有机会发帖。注意，这是一个使用customMessageHandler的变通方法（我没有使用自定义输入/输出绑定）。下面是：

目标：使用customMessageHandler从数据帧发送数据以创建D3JS树

路径：我已经设法将data.frame格式的数据发送到d3js树。单击actionbutton后，它将数据帧中的数据更改为JSON格式，然后将其发送到创建树的js文件。树的数据硬编码在“server.r”上

密码在哪里？在我的github上！

原创：我基于CHAID创建了一个树算法，用于从大型数据集创建洞察。人们可以将他们的csv上传到仪表板，仪表板会弹出d3js树：）代码有点长，因此我为您简化了它，并创建了一个最小的代码示例

希望你喜欢

干杯，

---

Long

+1关于“学习如何在不懂javascript的情况下将javascript实现到shiny中的必要步骤”您是否仍然对如何编写自定义绑定（包括d3.js）的指南感兴趣？Plotly看起来非常用户友好，这是一个很好的建议。我不是在创建D3图像，而是在寻找如何将D3.js绑定到Shinny的答案，这样我就可以在现有的很棒的D3图像池中进行点击（无需实际创建它们），这比plotly提供的效果更好。我更喜欢使用直接来源（这是雄心勃勃的）。@战舰看起来这个问题已经不存在了-/嗨，Chris，这里是：plotly的问题是，虽然实现非常简单，但渲染所需的时间是

$.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);