R Shiny 中的绘图，包括 Javascript (d3.js)

Question

我熟悉 R，但对 java-script 完全陌生。如果我的问题很简单，请原谅我。我想在我的 Shiny 应用程序中加入一些 javascript 元素。

我想根据用户输入显示一个圆环图。 （例如，如下所示：http://codepen.io/MeredithU/pen/LVVoNE）

甜甜圈图应该基于用户输入，我正在寻找 nvD3 和 d3.js 来创建该图。

1. 如何将滑块输入发送到 javascript 文件以创建绘图？
2. 当前在脚本中包含 js 文件的尝试未在屏幕上输出。 js、css 和 html 文件位于单独的 www 文件夹中。 （js、css、html文件与codepen链接中的相同）

任何指导将不胜感激。

UI.R

library(shiny)
library(shinydashboard)

dashboardPage(
  skin = "black",
  header <- dashboardHeader(
    title = "Simple Risk Calc",
    titleWidth = 335
  ),
  sidebar <- dashboardSidebar(
    sidebarMenu(
      menuItem("MENU ITEM")
    )
  ),
  body <- dashboardBody(
    fluidRow(
      box(title = tags$b("Demographic Information"), status = "success", width = 20, 
          collapsible = TRUE, collapsed = FALSE,
          valueBox("Age", subtitle = tags$b(h4("15")), icon = icon("user"), width = 3),
          valueBox("Gender", subtitle = tags$b("Male"), icon = icon("users"), width = 3),
          valueBox("Location", subtitle = tags$b("Urban"), icon = icon("ambulance"), width = 3),

        )
    ),

    fluidRow(
      tags$head(tags$script(src="index.js")),

    )
  ),

  dashboardPage(header, sidebar, body)
) 

服务器.R

library(shiny)
library(shinydashboard)
shinyServer(function(input, output) {
})

Answer 1

受this post的启发，可以在rCharts使用的模板中添加回调函数来修改绘图。

这是一个闪亮的示例，以及在圆环图中间添加文本的代码部分：

library(rCharts)
library(shiny)
server <- function(input, output) {
  output$plot <- renderChart2({
    mtcars2 <- subset(mtcars, cyl < input$obs1)
    p5<-nPlot(~ cyl, data = mtcars2, type = 'pieChart')
    p5$chart(donut = TRUE)

    #original template is from
    #https://github.com/ramnathv/rCharts/blob/master/inst/libraries/nvd3/layouts/chart.html
    p5$setTemplate(script = sprintf('
                                    <script type="text/javascript">
                                    $(document).ready(function(){
                                    draw{{chartId}}()
                                    });
                                    function draw{{chartId}}(){  
                                    var opts = {{{ opts }}},
                                    data = {{{ data }}}

                                    if(!(opts.type==="pieChart" || opts.type==="sparklinePlus" || opts.type==="bulletChart")) {
                                    var data = d3.nest()
                                    .key(function(d){
                                    //return opts.group === undefined ? main : d[opts.group]
                                    //instead of main would think a better default is opts.x
                                    return opts.group === undefined ? opts.y : d[opts.group];
                                    })
                                    .entries(data);
                                    }

                                    if (opts.disabled != undefined){
                                    data.map(function(d, i){
                                    d.disabled = opts.disabled[i]
                                    })
                                    }

                                    nv.addGraph(function() {
                                    var chart = nv.models[opts.type]()
                                    .width(opts.width)
                                    .height(opts.height)

                                    if (opts.type != "bulletChart"){
                                    chart
                                    .x(function(d) { return d[opts.x] })
                                    .y(function(d) { return d[opts.y] })
                                    }


{{{ chart }}}

{{{ xAxis }}}
{{{ x2Axis }}}

{{{ yAxis }}}

                                    d3.select("#" + opts.id)
                                    .append("svg")
                                    .datum(data)
                                    .transition().duration(500)
                                    .call(chart);
                                    nv.utils.windowResize(chart.update);
                                    return chart;
                                    },%s);
                                    };
                                    </script>','function() {
                                    var svg = d3.select("svg");

                                    var donut = svg.selectAll("g.nv-slice");
                                    console.log(donut)
                                    // Insert first line of text into middle of donut pie chart
                                    donut.insert("text", "g")
                                    .text("Line One")
                                    .attr("class", "middle")
                                    .attr("text-anchor", "middle")
                                    .attr("dy", "-.55em")
                                    .style("fill", "#000");
                                    // Insert second line of text into middle of donut pie chart
                                    donut.insert("text", "g")
                                    .text("Line Two")
                                    .attr("class", "middle")
                                    .attr("text-anchor", "middle")
                                    .attr("dy", ".85em")
                                    .style("fill", "#000");}'))
p5
  })
}

ui <- fluidPage(sidebarLayout(
  sidebarPanel(
    sliderInput("obs1", "Slide", min = 5, max = 10, value = 7)
  ),
  mainPanel(
  showOutput("plot", "nvd3"))
))

shinyApp(ui = ui, server = server)