网络图在小屏幕中没有响应

Networks Graph not responsive in small screen

提问人:S.M. Owadud Rahman Shohan 提问时间:11/17/2023 更新时间:11/17/2023 访问量:26

问:

我尝试使用此代码来生成网络图。但问题是代码的输出(网络图)在小屏幕上没有响应。边缘标签在节点之间重叠,节点在左右两侧略有截断。我想要一个在所有类型的屏幕尺寸下都能响应的网络图,这意味着当我在小屏幕中看到输出时,必须显示所有边缘标签的值,并且节点和边缘之间没有重叠。

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)

边缘标签在节点之间重叠,节点在左右两侧有点截断 我想要一个在所有类型的屏幕尺寸下都能响应的网络图,这意味着当我在小屏幕中看到输出时,必须显示所有边缘标签的值,并且节点和边缘之间没有重叠(这是我在笔记本电脑等大尺寸屏幕上看到它时的屏幕截图, 我希望在智能手机屏幕等小尺寸屏幕上输出此输出)

R ggplot2 闪亮的 igraph ggraph

评论


答: 暂无答案