我可以使用index.html和ui.r为我r闪亮的界面？ [英] Can I use index.html and ui.r for my r shiny interface?

问题描述

参考这篇文章，了解如何使用HTML完全构建闪亮的应用程式，我想知道是否有任何方式与使用传统的ui.r方法结合使用这种方法。

In reference to this on how to build your shiny app completely in HTML, I'm wondering if there is any way to use this approach in conjunction with using the traditional ui.r approach.

原因：这种使用D3和R Shiny的方法似乎需要将所有D3代码放入index.html文件。但我也想要一些交互性（selectInputs，dateRangeInputs，多个选项卡等）。

Reason: This approach of using D3 with R Shiny seems to require putting all D3 code into the index.html file. But I also want some interactivity (selectInputs, dateRangeInputs, multiple tabs, etc.). Any advice?

推荐答案

您可以使用代码添加自定义HTML到您的 ui.R 。

You can use tags to add custom HTML to your ui.R.

对于更复杂的输出，您可以使用 ui.R 和 server.R 。 此网页提供有关如何为任何代码执行此操作的信息。

For more complicated outputs, you can build custom shiny outputs while using an app with ui.R and server.R. This page has info on how to do this for any code.

这是一个使用您发布的D3示例中的JavaScript代码的示例。
应用程序只是生成绘图，我添加了一个 selectInput ，其中你可以选择它绘制的数据来显示如何集成。所有的JavaScript代码是由mbostock。 （可以在此处找到）。

Here's an example using the javascript code from the D3 example you posted. The app just generates the plot, I added a selectInput where you can select the data it plots to show how thing integrate. All of the javascript code is by mbostock. (Can be found here).

我添加了闪亮的绑定部分，并更改了几行以适应应用程序，我在上面注释了更改，以便您可以跟踪它们。

I added the shiny binding parts and changed a few lines to adapt it to the app, I commented above the changes so you can track them.

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", class="HierarchicalEdgeBundling")
    )        
  )
)

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 binding
var 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 binding
Shiny.outputBindings.register(binding, "HierarchicalEdgeBundling");

要使应用程序工作，您需要创建一个 www 文件夹与 ui.R 和 server.R 在同一目录中，并将 HierarchicalEdgeBundling.js 文件中，css在<$ c $中找到此处 c> graph_style.css 文件和json数据文件（例如 data1.json 或 data2.json ）。

To make the app work you need to create a www folder in the same directory as your ui.R and server.R and put in it the HierarchicalEdgeBundling.js file, the css found here in a graph_style.css file, and json data file (for example data1.json or data2.json).

这篇关于我可以使用index.html和ui.r为我r闪亮的界面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！