R Shiny - 旋转 tabPanel 和 onclick 功能
R Shiny - Rotating tabPanel & onclick function
我正在使用 networkD3
和 shiny 来可视化一些数据。我有一个由 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)
将此添加到您的 server.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';
")
})
在您的 ui.R 中,您必须包含 useShinyjs()
并且不要忘记加载包 shinyjs
。
关于在 JS 中旋转的信息可以在这里找到:Rotate a div using javascript
在 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")
还有很多错误需要解决,例如文本标签的放置和旋转,因此我们很乐意进行测试、填写 issues/bug 报告、and/or 拉取请求。 https://github.com/christophergandrud/networkD3
我正在使用 networkD3
和 shiny 来可视化一些数据。我有一个由 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)
将此添加到您的 server.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';
")
})
在您的 ui.R 中,您必须包含 useShinyjs()
并且不要忘记加载包 shinyjs
。
关于在 JS 中旋转的信息可以在这里找到:Rotate a div using javascript
在 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")
还有很多错误需要解决,例如文本标签的放置和旋转,因此我们很乐意进行测试、填写 issues/bug 报告、and/or 拉取请求。 https://github.com/christophergandrud/networkD3