如何在VisNetwork中为多组归属节点设置不同分组选中颜色？

要实现选中不同分组时，归属该分组的节点显示对应颜色，需要通过预处理节点分组标记和自定义选中事件回调来实现，具体步骤如下：

1. 预处理节点数据，标记节点所属的单个分组 #

首先将节点的复合分组字符串拆分为单个分组的存在标记，方便后续判断节点是否属于某个分组：

library(dplyr)
library(stringr)
library(visNetwork)

# 生成示例节点和边数据
nodes <- data.frame(id = 1:15, label = paste("Label", 1:15))
nodes$group <- sample(c("group 1", "group 2", "group 1, group 2, group 3"), 
                      nrow(nodes), replace = TRUE)

# 添加每个分组的标记列：判断节点是否包含该分组
nodes <- nodes %>%
  mutate(
    has_group1 = str_detect(group, "group 1"),
    has_group2 = str_detect(group, "group 2"),
    has_group3 = str_detect(group, "group 3")
  )

edges <- data.frame(from = trunc(runif(15)*(15-1))+1,
                    to = trunc(runif(15)*(15-1))+1)

2. 自定义选中事件的JavaScript回调 #

通过visOptions的selectedBy参数设置onChange回调函数，在选中分组变化时，动态修改节点的颜色：

visNetwork(nodes, edges) %>%
  visOptions(
    selectedBy = list(
      variable = "group",
      multiple = TRUE,
      # 自定义选中变化时的回调函数
      onChange = JS("function(selectedItems) {
        // 定义分组对应的颜色映射
        const colorMap = {
          'group 1': '#ff4444', // X色：红色
          'group 2': '#33b5e5', // 蓝色
          'group 3': '#99cc00'  // Y色：绿色
        };
        const defaultColor = '#cccccc'; // 默认灰色
        
        // 获取所有节点
        const nodes = this.body.nodes;
        
        // 遍历节点设置颜色
        nodes.forEach(node => {
          let nodeColor = defaultColor;
          // 优先匹配选中的分组（如果多选，按顺序取第一个匹配的分组颜色）
          for (let group of selectedItems) {
            if (node.options.has_group1 && group === 'group 1') {
              nodeColor = colorMap['group 1'];
              break;
            } else if (node.options.has_group2 && group === 'group 2') {
              nodeColor = colorMap['group 2'];
              break;
            } else if (node.options.has_group3 && group === 'group 3') {
              nodeColor = colorMap['group 3'];
              break;
            }
          }
          // 更新节点颜色
          node.update({color: {background: nodeColor}});
        });
      }")
    )
  ) %>%
  # 设置默认节点颜色
  visNodes(color = list(background = "#cccccc"))

关键说明 #

• 颜色映射自定义：可直接修改colorMap中的十六进制颜色值，替换成你需要的X、Y等目标颜色。
• 多选逻辑控制：若同时选中多个分组，代码会按group1 > group2 > group3的优先级为节点设置颜色；如果需要其他逻辑（比如显示混合色、同时高亮所有匹配分组的节点），可修改回调内的判断规则。
• 分组匹配准确性：通过提前生成的has_group1等标记列，确保即使节点属于多个分组，也能精准判断是否匹配当前选中的分组。

内容的提问来源于stack exchange，提问作者Mariana Santos