提问人:S.M. Owadud Rahman Shohan 提问时间:11/17/2023 更新时间:11/17/2023 访问量:26
网络图在小屏幕中没有响应
Networks Graph not responsive in small screen
问:
我尝试使用此代码来生成网络图。但问题是代码的输出(网络图)在小屏幕上没有响应。边缘标签在节点之间重叠,节点在左右两侧略有截断。我想要一个在所有类型的屏幕尺寸下都能响应的网络图,这意味着当我在小屏幕中看到输出时,必须显示所有边缘标签的值,并且节点和边缘之间没有重叠。
library(shiny)
library(shinydashboard)
library(tidygraph)
library(igraph)
library(ggraph)
library(tibble)
library(stringr)
library(ggplot2)
library(shinyjs) # Added shinyjs package
ui <- fluidPage(
useShinyjs(), # Initialize shinyjs
fluidRow(
column(width = 12,
plotOutput("graphPlot", height = "700px", width = "100%") # Use width = "100%"
)
)
)
server <- function(input, output) {
output$graphPlot <- renderPlot({
nodes <- tibble(id = 1:10, label = c("Hotel A bla bla bla", "Hotel B bla bla bla", "Hotel C bla bla bla", "Hotel D bla bla bla", "Hotel E bla bla bla", "Hotel F bla bla bla", "Hotel G bla bla bla", "Hotel H bla bla bla", "Hotel I bla bla bla", "Hotel J bla bla bla"))
# Specify edges
edges <- tibble(
from = c(4, 4, 4, 4, 4, 4, 4, 4, 4),
to = c(1, 2, 3, 5, 6, 7, 8, 9, 10),
rating = c(2, 3, 4, 6, 8, 7, 9, 5, 3) # Use 'rating' instead of 'label'
)
# Create a tidygraph
graph <- tbl_graph(nodes = nodes, edges = edges)
prices <- c("Tk 1200", "Tk 1250", "Tk 1350", "Tk 1850", "Tk 1650", "Tk 2150", "Tk 1800", "Tk 2500", "Tk 1500", "Tk 1300")
# Add edge_size and layout
E(graph)$edge_size <- edges$rating
layout <- layout_with_kk(graph, weights = E(graph)$edge_size)
# Kamada-Kawai algorithm organizes nodes in a graph match the distances between them.
# Define the desired rating values
desired_ratings <- c("r-2.5", "r-3", "r-4", "r-6", "r-8", "r-7", "r-9", "r-5.5", "r-3")
ggraph(graph, layout = layout) +
geom_edge_link(aes(label = desired_ratings, vjust = 0.6, hjust = -0.7, color = "darkorange"),
show.legend = FALSE,
start_cap = circle(5, "mm"),
end_cap = circle(5, "mm")) +
geom_node_point(aes(color = as.factor(id)), size = 20) +
geom_node_text(aes(label = str_wrap(label, width = 12)), vjust = 0.2, hjust = 0.5, size = 2.5) +
geom_node_text(aes(label = prices), vjust = 2, hjust = 0.5, size = 3, color = "black") +
theme_void() +
theme(
plot.margin = margin(1, 1, 1, 1, "cm"),
legend.position = "none"
)
})
# Use shinyjs to make the plot responsive
observe({
shinyjs::runjs("resizePlot();") # Calls JavaScript function to resize the plot
})
}
shinyApp(ui, server)
边缘标签在节点之间重叠,节点在左右两侧有点截断 我想要一个在所有类型的屏幕尺寸下都能响应的网络图,这意味着当我在小屏幕中看到输出时,必须显示所有边缘标签的值,并且节点和边缘之间没有重叠(这是我在笔记本电脑等大尺寸屏幕上看到它时的屏幕截图, 我希望在智能手机屏幕等小尺寸屏幕上输出此输出)
答: 暂无答案
上一个:更改 bslib 卡角半径
评论