R/Javascript：网络的折叠和展开

Question

R/Javascript：网络的折叠和展开

5

我正在使用R编程语言。

我有以下图形网络数据：

library(igraph)
library(visNetwork)

from <- c("Boss", "TeamA", "TeamA", "TeamA", "SubteamA1", "SubteamA1", "SubteamA1", "SubteamA2", "SubteamA2", "SubteamA2", "SubteamA3", "SubteamA3", "SubteamA3")
to <- c("TeamA", "SubteamA1", "SubteamA2", "SubteamA3", "employee1", "employee2", "employee3", "employee4", "employee5", "employee6", "employee7", "employee8", "employee9")
a1 = data_frame <- data.frame(from, to)


from <- c("Boss", "TeamB", "TeamB", "TeamB", "SubteamB1", "SubteamB1", "SubteamB1", "SubteamB2", "SubteamB2", "SubteamB2", "SubteamB3", "SubteamB3", "SubteamB3")
to <- c("TeamB", "SubteamB1", "SubteamB2", "SubteamB3", "employee10", "employee11", "employee12", "employee13", "employee14", "employee15", "employee16", "employee17", "employee18")
a2 = data_frame <- data.frame(from, to)


final = rbind(a1, a2)

我将它转换成了一个图形网络，并进行了可视化：

# Convert the data frame to an igraph object
g <- graph_from_data_frame(final, directed=FALSE)

# Plot the graph
plot(g)

# Optional visualization
visIgraph(g)

visIgraph(g) %>%
  visHierarchicalLayout(direction = "LR") %>%
  visInteraction(navigation = "zoom") %>%
  visInteraction(navigation = "drag") %>%
  visOptions(selectedBy = "to", 
             highlightNearest = TRUE, 
             nodesIdSelection = TRUE)

我的问题: 我一直在尝试找到一种方法，使得当您运行图表时，它只显示屏幕上的一个节点(老板节点) - 当您单击老板节点时，它展开为三个节点(老板，A团队，B团队)，如果您点击“ A团队”，它将展开为子团队…但如果您双击，则会折叠回上一个层次。

我能找到的最接近这样的是这里：https://github.com/datastorm-open/visNetwork/issues/307

但是否有更简单的方法在R/javascript中实现呢？最终输出应该是一个(独立的)HTML文件，可以离线查看。

谢谢！

注:

我对华丽的 Web 应用程序不感兴趣。
我会寻找像这样的东西：D3.js 可折叠力导向图上的标题，如何在 d3.js 中折叠（显示和隐藏）父节点的子节点？，通过选择器编程访问 d3.js v6 可折叠树中的数据，R collapsibleTree：在工具提示中动态添加图像
如果它有一个搜索栏和“缩小”选项，那将非常有趣：https://search.r-project.org/CRAN/refmans/collapsibleTree/html/collapsibleTreeNetwork.html，https://cran.r-project.org/web/packages/collapsibleTree/readme/README.html，https://adeelk93.github.io/collapsibleTree/

- stats_noob

2个回答

1

你可以尝试

从GitHub安装图表布局特性：

devtools::install_github("timelyportfolio/networkD3@feature/d3.chart.layout")

这使得{networkD3}的一些布局可以折叠（参见此SO帖子）。示例：

## devtools::install_github("timelyportfolio/networkD3@feature/d3.chart.layout")
library(networkD3)

hc <- hclust(dist(USArrests), "ave")

hierNetwork(as.treeNetwork(hc), 
            type = 'cluster.cartesian', 
            zoomable = TRUE,
            collapsible = TRUE
            )

使用 {r2d3} 来提供一个自定义的 d3 脚本，它可能是可折叠力导向图，你的 datastorm 示例可能就是基于它构建的。

- I_O

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quinten · Accepted Answer

一个选项是使用visOptions和collapse参数：

: 自定义选项。只是一个布尔值或命名列表。使用双击折叠/展开节点。在dev中。

这样可以在双击节点时折叠。您可以更改形状，以使其在折叠时具有不同的形状。以下是一些可重现的代码：

library(igraph)
library(visNetwork)

visIgraph(g) %>%
  visInteraction(navigation = "zoom") %>%
  visInteraction(navigation = "drag") %>%
  visOptions(collapse = list(enabled = TRUE, keepCoord = TRUE, clusterOptions = list(shape = "circle")))

^{使用 reprex v2.0.2 在2023年1月30日创建}

当点击您的老板节点时：

或者比如在TeamA中：

是否可以删除每个节点上的“cluster”标签？

您可以像这样添加 label = FALSE：

visIgraph(g) %>%
  visInteraction(navigation = "zoom") %>%
  visInteraction(navigation = "drag") %>%
  visOptions(collapse = list(enabled = TRUE, keepCoord = TRUE, clusterOptions = list(shape = "circle", label = FALSE)))

在TeamB上的示例：