R 闪亮 - 旋转标签面板和点击功能

Question

我正在使用networkD3和闪亮来可视化一些数据。我有一个由networkD3创建的diagonalNetwork。但是，我希望树垂直显示。 networkD3似乎没有旋转对角线网络的选项。

我可以在shiny中旋转tabPanel吗？

我在下面添加了代码。如果可能的话，我希望能够旋转diagonalNetwork()指定的图表。如果没有，我可以旋转整个tabPanel吗？

我注意到networkD3的forceNetwork有一个onclick选项，是否可以用diagonalNetwork以相同的方式响应节点点击？

#### Load necessary packages and data ####
library(shiny)
library(networkD3)
data(MisLinks)
data(MisNodes)
hc <- hclust(dist(USArrests), "ave")
URL <- paste0(
  "https://cdn.rawgit.com/christophergandrud/networkD3/",
  "master/JSONdata//flare.json")
## Convert to list format
Flare <- jsonlite::fromJSON(URL, simplifyDataFrame = FALSE)
#### Server ####
server <- function(input, output) {
  output$simple <- renderDiagonalNetwork({
    diagonalNetwork(List = Flare, fontSize = 10, opacity = 0.9)
  })  
  
  output$force <- renderForceNetwork({
    forceNetwork(Links = MisLinks, Nodes = MisNodes, Source = "source",
                 Target = "target", Value = "value", NodeID = "name",
                 Group = "group", opacity = input$opacity)
    
    
  })
  
  ## 
  #dendroNetwork(hc, height = 600)
 # 
#  dendroNetwork(hc, height = 500, width = 800, fontSize = 10,
#                linkColour = "#ccc", nodeColour = "#fff", nodeStroke = "steelblue",
#                textColour = "#111", textOpacity = 0.9, textRotate = NULL,
#                opacity = 0.9, margins = NULL, linkType = c("elbow", "diagonal"),
#                treeOrientation = c("horizontal", "vertical"), zoom = FALSE)
  
  
}
#### UI ####
ui <- shinyUI(fluidPage(
  titlePanel("Shiny networkD3 "),
  sidebarLayout(
    sidebarPanel(
      sliderInput("opacity", "Opacity (not for Sankey)", 0.6, min = 0.1,
                    max = 1, step = .1)
    ),
    mainPanel(
      tabsetPanel(
        tabPanel("Simple Network", diagonalNetworkOutput("simple")),
        tabPanel("Force Network", forceNetworkOutput("force"))
      )
    )
  )
))
#### Run ####
shinyApp(ui = ui, server = server)

Answer 1

将其添加到您的服务器。R

注意：包含网络的div 的 id 是 simple 。

  observe({
    runjs("
          var rotated = false;
          var div = document.getElementById('simple');
          deg = rotated ? 0 : 90
          div.style.webkitTransform = 'rotate('+deg+'deg)'; 
          div.style.mozTransform    = 'rotate('+deg+'deg)'; 
          div.style.msTransform     = 'rotate('+deg+'deg)'; 
          div.style.oTransform      = 'rotate('+deg+'deg)'; 
          div.style.transform       = 'rotate('+deg+'deg)';
          rotated = !rotated;
          div.style.position = 'absolute';
          div.style.width = 1200+'px';
          div.style.height = 1200+'px';
    ")
  })

在您的用户界面中。R 您必须包含useShinyjs()并且不要忘记加载包shinyjs。有关在 JS 中旋转的信息可以在这里找到：使用 javascript 旋转div

Answer 2

在当前的 networkD3 开发版本 (v0.4.9000 @ 2017.08.30( 中，有一个新的 treeNetwork() 函数内置了这个和许多其他新功能(它们也是可折叠的(。

您可以使用以下方法安装当前的开发版本...

devtools::install_github("christophergandrud/networkD3")

并绘制垂直(向下扩展(对角线图...

library(networkD3)
library(jsonlite)
URL <- paste0("https://cdn.rawgit.com/christophergandrud/networkD3/",
              "master/JSONdata//flare.json")
Flare <- jsonlite::fromJSON(URL, simplifyDataFrame = FALSE)
treeNetwork(Flare, type = "tidy", direction = "down")

仍然有很多错误需要解决，例如文本标签的放置和旋转，因此我们非常感谢测试，填写问题/错误报告和/或拉取请求。 https://github.com/christophergandrud/networkD3