使用 HTML 而不是 sunburstOutput 在 Shiny 中创建旭日图

Question

尊敬的社区成员，

我正在使用 R 包 sunburstR 以便在 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)

不幸的是，按照这种方法我无法重现图表。你能提供这方面的帮助吗？

感谢您抽出时间回答我的问题。

干杯，科斯塔斯

Answer 1

您可以使用 Javascript 隐藏图例。在menuItem下面添加以下内容（记得在menuItem行

后面添加一个,

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

如果愿意，您甚至可以完全删除它（将 hide 更改为 remove）。

Answer 2

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

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)

使用 HTML 而不是 sunburstOutput 在 Shiny 中创建旭日图

Create sunburst plot in Shiny using HTML instead of sunburstOutput

r

html

shiny

sunburst-diagram

选项 1 - htmlwidgets::onRender

选项 2 - 替换 sunburst_html 函数