心智圖狀佈局（網絡可視化使用vis.js JavaScript庫）

Question

是否有可能調整visNetwork的選項（例如visLayout，visOptions或visPhysics），以獲得一個網絡的可視化，類似於一個心智圖？

我想獲得這樣的事：

而這裏使用visNetwork得出相同的數據在R我重複的例子：

nodes <- structure(list(id = 1:22, label = structure(c(14L, 20L, 19L, 
                 16L, 12L, 18L, 2L, 17L, 22L, 8L, 13L, 3L, 4L, 5L, 6L, 7L, 21L, 
                 15L, 9L, 1L, 10L, 11L), .Label = c("A seemengly impossible mission\n", 
                         "Another \n", "Detail 1\n", "Detail 2\n", "Detail 3\n", "Detail 4\n", 
                         "Detail 5\n", "Do you know where is Dover?\n", "Dover Castle\n", 
                         "Finally, I'm the fifth\n", "I'm alone", "I'm relatively short\n", 
                         "Let's say there is a third one\n", "Main topic\n", "Operation Dynamo\n", 
                         "or, I'm even longer and perhaps I need some more space\n", "Running out of imagination\n", 
                         "Shorter\n", "Some longer text goes here\n", "Thing 1\n", "Thing number 4\n", 
                         "What can happen?\n"), class = "factor"), shape = structure(c(1L, 
                                        1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
                                        1L, 1L, 1L, 1L, 1L), class = "factor", .Label = "box")), .Names = c("id", 
                                                        "label", "shape"), row.names = c(NA, -22L), class = "data.frame") 

edges <- structure(list(from = c(1L, 2L, 2L, 2L, 2L, 1L, 7L, 7L, 7L, 1L, 
           11L, 11L, 11L, 11L, 11L, 1L, 17L, 17L, 17L, 1L, 21L), to = 2:22, 
         arrows = structure(c(1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 
              1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L, 1L), .Label = "to", class = "factor")), .Names = c("from", 
                                      "to", "arrows"), row.names = c(NA, 21L), class = "data.frame") 
library(visNetwork) 
visNetwork(nodes, edges) %>% 
    visOptions(highlightNearest = TRUE, nodesIdSelection = TRUE) %>% 
    visLayout(randomSeed = 1) 

這段代碼產生這樣的可視化：

所以你可以看到第一個數字更清晰，更易於閱讀和使用。是否可以調整visNetwork參數（vis.js參數）以使結果與此處的第一個數字相似？

基本上它是像具有中央主主題，然後圍繞主主題徑向佈置下一級的主題，並且在彼此（種類列表）放樣了進一步的水平。

Answer 1

你可以做到這一點通過座標節點data.frame，然後禁用物理。

你可以把你想要的節點，並用閃亮的應用程序找回座標，然後使用這個網絡中，像這樣的例子：

mynetwork <- visNetwork(nodes, edges) %>% 
    visOptions(highlightNearest = TRUE, nodesIdSelection = TRUE) %>% 
    visLayout(randomSeed = 1) %>% 
    visPhysics(enabled = FALSE) # disable physics to move nodes 

require(shiny) 
server <- function(input, output) { 
    output$network <- renderVisNetwork({ 
    mynetwork 
    }) 

    vals <- reactiveValues(coords=NULL) 

    output$view <- renderPrint({ 
    write.table(vals$coords, file = "save_coordinates.csv", sep = ";") 
    vals$coords 
    }) 

    observe({ 
    input$getcoord 
    visNetworkProxy("network") %>% visGetPositions() 
    vals$coords <- if (!is.null(input$network_positions)) 
     do.call(rbind, input$network_positions) 
    }) 
} 

ui <- fluidPage(
    visNetworkOutput("network", height = "800px"), 
    actionButton("getcoord", "View & Save Coordinates"), 
    verbatimTextOutput("view") 
) 

shinyApp(ui = ui, server = server) 


# and after, put coordinnates into nodes data.frame and use visNodes(fixed = TRUE) 
# if you want 

coord <- read.csv("save_coordinates.csv", sep = ";") 
nodes <- cbind(nodes, coord) 

visNetwork(nodes, edges) %>% 
    visNodes(fixed = T) %>% 
    visOptions(highlightNearest = TRUE, nodesIdSelection = TRUE) %>% 
    visLayout(randomSeed = 1) %>% 
    visPhysics(enabled = FALSE) 

您還可以level和visHierarchicalLayout玩：

nodes <- data.frame(id = 1:9, level = c(1,1,2,3,3, 4, 4, 4, 4)) 
edges <- data.frame(from = c(3, 3, 3, 3, 4, 4, 5, 5), 
        to = c(1, 2, 4, 5, 6, 7, 8, 9)) 


visNetwork(nodes, edges) %>% 
    visHierarchicalLayout(direction = "LR")