使用HTML而不是sunburstOutput在Shiny中创建sunburst plot

时间:2016-10-07 16:29:19

标签: r html5 shiny sunburst-diagram

亲爱的社区成员,

我正在使用RsunburstR,以便在Shiny中创建一个旭日形图。下面的代码很完美,我可以创建绘图,但是,我想完全删除图例。出于这个原因,我知道使用HTML5我将能够更多地使用绘图的参数。

rm(list = ls())
library(shiny)
library(shinydashboard)
library(sunburstR)
library(data.table)

ui <- dashboardPage(
  dashboardHeader(),

  dashboardSidebar( 
  sidebarMenu(
  menuItem("Sunburst Plot", tabName = "sunbrstPlot")

  )
  ),

  dashboardBody( tabBox(id = "sunbrstPlot", width = "100%", height = "1000px",
                sunburstOutput("sunburstPlot", height = "750", width = "100%")
                )

  )
  )         

server <- function(input, output) { 

# Create Sunburst plot
output$sunburstPlot <- renderSunburst({ 

tempDat <-  data.table(A=sample(rep(c("a","b","c","d","e"), 100)), B = sample(rep(c("a","b","c","d","e"), 100)), C = sample(rep(c("a","b","c","d","e"), 100))) 
tempDat[,c("V1","V2"):= list(paste0(A,"-",B, "-", C),1)]
sunburst(tempDat[,.(V1,V2)])

})

}
shinyApp(ui, server)

为此图表编写的HTML5代码为:

print(sunburstOutput("sunburstPlot", height = "750", width = "100%"))

<div class="sunburst html-widget html-widget-output" id="sunburstPlot" style="width:100%; height:750px;  position:relative;">
  <div>
    <div class="sunburst-main">
      <div class="sunburst-sequence"></div>
      <div class="sunburst-chart">
        <div class="sunburst-explanation" style="visibility:hidden;"></div>
      </div>
    </div>
    <div class="sunburst-sidebar">
      <input type="checkbox" class="sunburst-togglelegend">Legend</input>
      <div class="sunburst-legend" style="visibility:hidden;"></div>
    </div>
  </div>
</div>

我在想如果可以修改HTML代码并将其合并到dashboardBody我将能够重现图表并且可能在将来摆脱传奇:

rm(list = ls())
library(shiny)
library(shinydashboard)
library(sunburstR)
library(data.table)

ui <- dashboardPage(
  dashboardHeader(),

  dashboardSidebar( 
  sidebarMenu(
  menuItem("Sunburst Plot", tabName = "sunbrstPlot")

  )
  ),

  dashboardBody( tabBox(id = "sunbrstPlot", width = "100%", height = "1000px",
                #sunburstOutput("sunburstPlot", height = "750", width = "100%")

                tags$div(class="sunburst html-widget html-widget-output", id="sunburstPlot", style="width:100%; height:750px;  position:relative;",

                                        tags$div(
                                            tags$div(class = "sunburst-main",
                                                tags$div(class="sunburst-sequence"),
                                                tags$div(class="sunburst-chart",
                                                    tags$div(class="sunburst-explanation", style="visibility:hidden;")
                                                            )
                                                    ), tags$div(class="sunburst-sidebar",
                                                            tags$input(type="checkbox", class="sunburst-togglelegend", "Legend"),
                                                            tags$div(class="sunburst-legend", style="visibility:hidden;")
                                                                )
                                                )

                                             )



                )

  )
  )         

server <- function(input, output) { 

# Create Sunburst plot
output$sunburstPlot <- renderSunburst({ 

tempDat <-  data.table(A=sample(rep(c("a","b","c","d","e"), 100)), B = sample(rep(c("a","b","c","d","e"), 100)), C = sample(rep(c("a","b","c","d","e"), 100))) 
tempDat[,c("V1","V2"):= list(paste0(A,"-",B, "-", C),1)]
sunburst(tempDat[,.(V1,V2)])

})

}
shinyApp(ui, server)

不幸的是,按照这种方法,我无法重现图表。你可以提供帮助吗?

感谢您抽出宝贵时间。

干杯, 科斯塔斯

2 个答案:

答案 0 :(得分:4)

@warmoverflow应该可以正常工作,但下面的代码将显示一些可能更强大的方法来实现您的目标。我将在代码中内联评论以尝试描述方法。

library(sunburstR)
sequences <- read.csv(
  system.file("examples/visit-sequences.csv",package="sunburstR")
  ,header = FALSE
  ,stringsAsFactors = FALSE
)

sunburst(sequences)

选项1 - htmlwidgets :: onRender

我们可以在绘制旭日后使用htmlwidgets::onRender删除图例。

htmlwidgets::onRender(
  sunburst(sequences),
  '
function(el,x){
  d3.select(el).select(".sunburst-sidebar").remove()
}
  '
)

选项2 - 替换sunburst_html函数

htmlwidgets允许使用自定义html函数来定义htmlwidget的容器。我们可以通过sunburstR:::sunburst_html看到sunburstR的功能。在这种方法中,我们将使用不带图例的自定义html函数替换sunburstR:::sunburst_html

library(htmltools)
sunburst_html <- function(id, style, class, ...){
  tagList(
    tags$div(
      id = id, class = class, style = style, style="position:relative;"
      ,tags$div(
        tags$div(class = "sunburst-main"
           , tags$div( class = "sunburst-sequence" )
           , tags$div( class = "sunburst-chart"
             ,tags$div( class = "sunburst-explanation", style = "visibility:hidden;")
           )
        )
        # comment this out so no legend
        #,tags$div(class = "sunburst-sidebar"
        #  , tags$input( type = "checkbox", class = "sunburst-togglelegend", "Legend" )
        #    , tags$div( class = "sunburst-legend", style = "visibility:hidden;" )
        )
    )
  )
}

# replace the package sunburst_html with our custom function
#  defined above
assignInNamespace("sunburst_html", sunburst_html, "sunburstR")

sunburst(sequences)

答案 1 :(得分:1)

您可以使用Javascript来隐藏图例。在menuItem下方添加以下内容(请务必在,行后添加menuItem

  tags$head(tags$script(HTML("
                         $(document).ready(function(e) {
                            $('.sunburst-sidebar').hide();
                         })
                         ")))

如果您愿意,甚至可以完全删除它(将hide更改为remove)。