如何在Jupyter Notebook中交互式渲染DAG并设置节点默认布局？

由于Matplotlib仅支持静态可视化，要实现可拖拽的交互式图，需要使用专门适配Jupyter环境的交互图库。以下提供两种成熟方案：

方案一：使用ipycytoscape（Jupyter原生组件） #

ipycytoscape是为Jupyter设计的原生交互式图库，支持节点拖拽、自定义布局，交互体验流畅。

步骤1：安装依赖 #

!pip install ipycytoscape

步骤2：实现代码 #

import networkx as nx
import ipycytoscape as cy

# 定义DAG边
edges = [("$S_{t-2}$", "$S_{t-1}$"), ("$S_{t-1}$", "$S_t$")]

# 构建NetworkX有向图
G = nx.DiGraph(edges)

# 转换为cytoscape图对象
cy_graph = cy.from_networkx(G)

# 设置默认垂直布局（从上到下排列）
cy_graph.set_layout(
    name='dagre',
    nodeSpacing=120,  # 节点间距
    edgeLengthVal=100,  # 边长度
    rankDir='TB'  # TB = Top to Bottom，垂直方向
)

# 自定义节点和边样式
cy_graph.set_style([
    {
        'selector': 'node',
        'style': {
            'background-color': 'skyblue',
            'label': 'data(id)',
            'font-size': '20px',
            'font-weight': 'bold',
            'width': '160px',
            'height': '110px'
        }
    },
    {
        'selector': 'edge',
        'style': {
            'line-color': 'black',
            'width': 2,
            'target-arrow-color': 'black',
            'target-arrow-shape': 'triangle'
        }
    }
])

# 在Notebook中显示交互式图
cy_graph

效果说明 #

• 节点支持拖拽，拖拽后布局会自动适配调整
• 默认采用垂直从上到下的排列，符合需求
• 样式可通过set_style灵活修改

方案二：使用pyvis（生成交互式HTML嵌入Notebook） #

pyvis通过生成HTML文件实现交互，适合需要导出独立可视化文件的场景。

步骤1：安装依赖 #

!pip install pyvis

步骤2：实现代码 #

import networkx as nx
from pyvis.network import Network

# 定义DAG边
edges = [("$S_{t-2}$", "$S_{t-1}$"), ("$S_{t-1}$", "$S_t$")]

# 构建NetworkX有向图
G = nx.DiGraph(edges)

# 创建pyvis网络对象，启用Notebook模式
net = Network(directed=True, notebook=True, height='400px', width='100%')

# 从NetworkX导入图结构
net.from_nx(G)

# 设置垂直层级布局及样式
net.set_options("""
{
  "layout": {
    "hierarchical": {
      "direction": "UD",
      "sortMethod": "directed"
    }
  },
  "nodes": {
    "color": "skyblue",
    "font": {
      "size": 20,
      "bold": true
    },
    "size": 30
  },
  "edges": {
    "color": "black",
    "width": 2,
    "arrows": {
      "to": {
        "enabled": true,
        "scaleFactor": 1.5
      }
    }
  }
}
""")

# 在Notebook中显示交互式图
net.show("dag_interactive.html")

效果说明 #

• 运行后在Notebook中嵌入交互式HTML，支持节点拖拽
• 默认垂直排列，样式可通过JSON配置调整
• 可通过show()方法导出独立HTML文件

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