我可以将index.html和ui.r用于我的r闪亮界面吗？

概述关于如何在 HTML中完全构建您的闪亮应用程序的 this,我想知道是否有任何方法可以结合使用传统的ui.r方法来使用此方法. 原因：This使用带有R Shiny的D3的方法似乎需要将所有D3代码放入index.html文件中.但我也想要一些交互性(selectInputs,dateRangeInputs,多个标签等).有什么建议？ 您可以使用 tags向您的ui.R添加自定义HTML. 对于更 关于如何在 HTML中完全构建您的闪亮应用程序的 this,我想知道是否有任何方法可以结合使用传统的ui.r方法来使用此方法.

原因：This使用带有R Shiny的D3的方法似乎需要将所有D3代码放入index.HTML文件中.但我也想要一些交互性(selectinputs,daterangeinputs,多个标签等).有什么建议？

解决方法 您可以使用 tags向您的ui.R添加自定义HTML.

对于更复杂的输出,您可以在使用带有ui.R和server.R的应用程序时构建自定义闪亮输出. This page有关于如何为任何代码执行此 *** 作的信息.

这是使用您发布的D3示例中的JavaScript代码的示例.
该应用程序只生成绘图,我添加了一个selectinput,您可以在其中选择它绘制的数据以显示事物的集成方式.所有的JavaScript代码都是由mbostock完成的. (可以找到here).

我添加了闪亮的绑定部分并更改了几行以使其适应应用程序,我在上面对更改进行了评论,以便您可以跟踪它们.

ui.R

library(shiny)shinyUI(  fluIDPage(singleton(Tags$head(    #adds the d3 library needed to draw the plot    Tags$script(src="http://d3Js.org/d3.v3.min.Js"),#the Js script holding the code to make the custom output    Tags$script(src="HIErarchicalEdgeBundling.Js"),#the stylesheet,paste all that was between the <style> Tags from your example in the graph_style.CSS file    Tags$link(rel = "stylesheet",type = "text/CSS",href = "graph_style.CSS")  )),mainPanel(      #this select input allows the user to choose Json files in the www directory      selectinput("data_files","JsON files:",as.matrix(List.files(path="www",pattern="Json"))),#this div will hold the final graph      div(ID="graph",)    )          ))

server.R

shinyServer(function(input,output,session) {  #output to the graph div  output$graph <- reactive({    #get the selected file    input$data_files  })})

HIErarchicalEdgeBundling.Js

//shiny output bindingvar binding = new Shiny.OutputBinding();binding.find = function(scope) {        return $(scope).find(".HIErarchicalEdgeBundling");};binding.renderValue = function(el,data) {//empty the div so that it removes the graph when you change data  $(el).empty()if(data!=null){  var diameter = 960,radius = diameter / 2,innerRadius = radius - 120;  var cluster = d3.layout.cluster()      .size([360,innerRadius])      .sort(null)      .value(function(d) { return d.size; });  var bundle = d3.layout.bundle();  var line = d3.svg.line.radial()      .interpolate("bundle")      .tension(.85)      .radius(function(d) { return d.y; })      .angle(function(d) { return d.x / 180 * Math.PI; });  //select the div that has the same ID as the el ID   var svg = d3.select("#" + $(el).attr('ID')).append("svg")      .attr("wIDth",diameter+300)      .attr("height",diameter+300)    .append("g")      .attr("transform","translate(" + radius + "," + radius + ")");  var link = svg.append("g").selectAll(".link"),node = svg.append("g").selectAll(".node");  //add the data from the user input  d3.Json(data,function(error,classes) {    var nodes = cluster.nodes(packageHIErarchy(classes)),links = packageimports(nodes);    link = link        .data(bundle(links))      .enter().append("path")        .each(function(d) { d.source = d[0],d.target = d[d.length - 1]; })        .attr("class","link")        .attr("d",line);    node = node        .data(nodes.filter(function(n) { return !n.children; }))      .enter().append("text")        .attr("class","node")        .attr("dy",".31em")        .attr("transform",function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); })        .style("text-anchor",function(d) { return d.x < 180 ? "start" : "end"; })        .text(function(d) { return d.key; })        .on("mouSEOver",mouSEOvered)        .on("mouSEOut",mouSEOuted);  });  function mouSEOvered(d) {    node        .each(function(n) { n.target = n.source = false; });    link        .classed("link--target",function(l) { if (l.target === d) return l.source.source = true; })        .classed("link--source",function(l) { if (l.source === d) return l.target.target = true; })      .filter(function(l) { return l.target === d || l.source === d; })        .each(function() { this.parentNode.appendChild(this); });    node        .classed("node--target",function(n) { return n.target; })        .classed("node--source",function(n) { return n.source; });  }  function mouSEOuted(d) {    link        .classed("link--target",false)        .classed("link--source",false);    node        .classed("node--target",false)        .classed("node--source",false);  }  d3.select(self.frameElement).style("height",diameter + "px");  // Lazily construct the package hIErarchy from class names.  function packageHIErarchy(classes) {    var map = {};    function find(name,data) {      var node = map[name],i;      if (!node) {        node = map[name] = data || {name: name,children: []};        if (name.length) {          node.parent = find(name.substring(0,i = name.lastIndexOf(".")));          node.parent.children.push(node);          node.key = name.substring(i + 1);        }      }      return node;    }    classes.forEach(function(d) {      find(d.name,d);    });    return map[""];  }  // Return a List of imports for the given array of nodes.  function packageimports(nodes) {    var map = {},imports = [];    // Compute a map from name to node.    nodes.forEach(function(d) {      map[d.name] = d;    });    // For each import,construct a link from the source to target node.    nodes.forEach(function(d) {      if (d.imports) d.imports.forEach(function(i) {        imports.push({source: map[d.name],target: map[i]});      });    });    return imports;  }}};//register the output bindingShiny.outputBindings.register(binding,"HIErarchicalEdgeBundling");

要使应用程序正常工作,您需要在与ui.R和server.R相同的目录中创建一个www文件夹,并在其中输入HIErarchicalEdgeBundling.Js文件,在graph_style.CSS文件中找到的CSS为here,以及Json数据文件(例如data1.json或data2.json).

总结

以上是内存溢出为你收集整理的我可以将index.html和ui.r用于我的r闪亮界面吗？全部内容，希望文章能够帮你解决我可以将index.html和ui.r用于我的r闪亮界面吗？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。