如何实现节点嵌套的交互式有向图？兼询邻接矩阵可行性

一、符合预期的交互式嵌套有向图实现（Pyvis修正版） #

原代码存在集群用法错误、重复添加节点/边、交互逻辑未关联嵌套关系等问题，以下是修正后的代码，实现点击"node 1"展开/收起内部有向环，且内部节点真正嵌套于"node 1"：

from pyvis.network import Network
import webbrowser

# 初始化有向网络图，关闭notebook模式避免冲突
nt = Network(height="800px", width="1600px", directed=True, notebook=False)

# 添加所有节点
nodes = ["node 1", "node 2", "node A", "node B", "node C"]
for node in nodes:
    nt.add_node(node)

# 添加顶层边
nt.add_edge("node 1", "node 2")

# 添加内部环的边，默认隐藏
inner_edges = [("node A", "node B"), ("node B", "node C"), ("node C", "node A")]
for src, dst in inner_edges:
    nt.add_edge(src, dst, hidden=True)

# 创建嵌套集群：将内部节点归入node 1的集群，实现视觉嵌套
nt.add_cluster(
    label="node 1内部",
    nodes=["node A", "node B", "node C"],
    shape="box",
    color="#a0e0ff",
    border_width=2,
    parent="node 1"
)

# 配置布局与交互选项
nt.set_options("""
var options = {
  "physics": {
    "enabled": true,
    "stabilization": {
      "iterations": 200
    }
  },
  "hierarchicalLayout": {
    "enabled": true,
    "direction": "LR",
    "sortMethod": "directed"
  },
  "interaction": {
    "hover": true,
    "selectable": true
  }
}
""")

# 添加点击node 1切换内部节点/边显示的逻辑
javascript_code = """
document.addEventListener('DOMContentLoaded', function() {
    var network = window.network;
    var innerNodes = ["node A", "node B", "node C"];
    var innerEdgeIds = [];
    var isInnerVisible = false;

    // 预存内部边ID
    network.body.data.edges.forEach(edge => {
        if ((edge.from === "node A" && edge.to === "node B") ||
            (edge.from === "node B" && edge.to === "node C") ||
            (edge.from === "node C" && edge.to === "node A")) {
            innerEdgeIds.push(edge.id);
        }
    });

    // 绑定node 1点击事件
    network.on("click", params => {
        if (params.nodes.length > 0 && params.nodes[0] === "node 1") {
            isInnerVisible = !isInnerVisible;
            // 切换内部节点显示状态
            innerNodes.forEach(nodeId => {
                const node = network.body.data.nodes.get(nodeId);
                node.hidden = !isInnerVisible;
                network.body.data.nodes.update(node);
            });
            // 切换内部边显示状态
            innerEdgeIds.forEach(edgeId => {
                const edge = network.body.data.edges.get(edgeId);
                edge.hidden = !isInnerVisible;
                network.body.data.edges.update(edge);
            });
            network.stabilize();
        }
    });
});
"""

# 生成并修改HTML文件
nt.show("nested_graph.html")
with open("nested_graph.html", "r+", encoding="utf-8") as f:
    content = f.read()
    content = content.replace("</head>", f"<script>{javascript_code}</script></head>")
    f.seek(0)
    f.write(content)
    f.truncate()

# 自动打开页面
webbrowser.open_new_tab("nested_graph.html")

核心修正点： #

• 使用nt.add_cluster()创建真正的嵌套集群，将内部节点关联到"node 1"，实现视觉嵌套
• 默认隐藏内部节点和边，通过点击"node 1"触发显示/隐藏切换
• 清理重复添加的节点与边，确保数据唯一性
• 配置层级布局，让顶层与嵌套节点的结构更清晰

二、嵌套式有向图的邻接矩阵转换 #

可以转换为邻接矩阵，根据需求可选择两种表示方式：

1. 扁平化邻接矩阵 #

忽略嵌套层级，将所有节点（顶层+内部）作为矩阵的行和列，元素表示节点间的直接边关系：

• 节点顺序：["node 1", "node 2", "node A", "node B", "node C"]
• 矩阵内容：

[
 [0, 1, 0, 0, 0],  # node 1 → node 2
 [0, 0, 0, 0, 0],  # node 2无出边
 [0, 0, 0, 1, 0],  # node A → node B
 [0, 0, 0, 0, 1],  # node B → node C
 [0, 0, 1, 0, 0]   # node C → node A
]

适合常规图分析场景，代码实现（用NetworkX）：

import networkx as nx

G = nx.DiGraph()
nodes = ["node 1", "node 2", "node A", "node B", "node C"]
G.add_nodes_from(nodes)
G.add_edges_from([
    ("node 1", "node 2"),
    ("node A", "node B"),
    ("node B", "node C"),
    ("node C", "node A")
])

# 生成邻接矩阵
adj_matrix = nx.to_numpy_array(G, nodelist=nodes)
print(adj_matrix)

2. 分层块矩阵（体现嵌套关系） #

如果需要保留嵌套层级，可用块矩阵表示：

[
 [M11, M12],
 [M21, M22]
]

• M11：node 1内部子图的邻接矩阵（node A/B/C的环）
• M12：node 1到外部节点的边（仅node 1→node 2）
• M21：外部节点到node 1内部的边（无）
• M22：外部节点的邻接矩阵（仅node 2，无出边）
  这种方式能直观体现嵌套结构，但需要额外的层级标注说明。

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