决策树可视化系统

一个基于 Vue 3 的交互式决策树可视化 Web 应用，支持决策节点、机会节点和结束节点的创建、编辑和可视化。

功能特点

节点类型

• 决策节点 (Decision Node)：用户可以选择不同分支的决策点，支持最大化/最小化设置
• 机会节点 (Chance Node)：表示随机事件，包含概率信息和分支值
• 结束节点 (Terminal Node)：决策树的叶子节点，包含收益值

分支格式

• 决策节点分支：(标签, 值, 目标节点名称)
• 机会节点分支：(标签, 概率, 值, 目标节点名称)

可视化功能

• 拖拽节点调整位置
• 双击节点编辑属性
• 实时连接线显示
• 分支标签和值显示

快速开始

安装依赖

npm install

启动开发服务器

npm run dev

构建生产版本

npm run build

使用指南

创建决策树

1. 添加节点

   • 点击"添加节点"按钮创建新节点
   • 输入节点名称
   • 选择节点类型（决策节点、机会节点、结束节点）
   • 设置节点属性

2. 配置分支

   • 对于决策节点和机会节点，可以添加多个分支
   • 设置分支标签（如："low", "medium", "high"）
   • 设置分支值（数值）
   • 机会节点需要设置概率值
   • 输入目标节点名称进行连接
   • 重要：不同分支标签可以连接到相同目标节点，系统通过分支标签区分连接

3. 设置收益

   • 结束节点需要设置收益值（payoff function）

可视化操作

• 双击节点：编辑节点属性
• 拖拽节点：调整节点位置
• 侧边栏：查看和管理所有节点
• 手动连接：通过侧边栏手动连接节点，选择具体的源节点和目标节点
• 编辑连接：在连接列表中点击"编辑"按钮修改连接属性（包括标签、值、概率）

数据管理

• 导出结构：点击"导出结构"按钮，下载 JSON 文件
• 导入结构：点击"导入结构"按钮，选择 JSON 文件恢复决策树
• 节点命名：节点可以具有相同名称，便于分组和连接

运行分析

1. 构建完整的决策树结构
2. 点击"运行分析"按钮
3. 查看分析结果：
   • 期望收益
   • 最优决策路径
   • 所有可能路径的详细信息

项目结构

smart_code_front/
├── src/
│   ├── views/
│   │   └── HomeView.vue          # 主应用页面
│   ├── router/
│   │   └── index.js              # 路由配置
│   └── main.js                   # 应用入口
├── example_decision_tree.json    # 示例决策树
├── package.json                  # 前端依赖
└── README.md                     # 项目说明

数据格式

节点数据结构

{
  name: "节点名称",
  type: "decision|chance|terminal",
  maximize: true,  // 仅决策节点
  branches: [
    {
      label: "分支标签",
      value: 数值,
      probability: 0.5,  // 仅机会节点
      next: "target_node_name"
    }
  ],
  payoff: 100  // 仅结束节点
}

分支格式说明

决策节点分支

("low", 300, "competitor_bid")     # (标签, 值, 目标节点名称)
("medium", 500, "competitor_bid")
("high", 700, "competitor_bid")
("no-bid", 0, "profit")

机会节点分支

("low", 0.35, 400, "cost")        # (标签, 概率, 值, 目标节点名称)
("medium", 0.50, 600, "cost")
("high", 0.15, 800, "cost")

开发说明

前端开发

• 使用 Vue 3 Composition API
• 响应式数据管理
• 组件化开发
• D3.js 可视化

扩展功能

• 节点拖拽功能
• 更复杂的决策树布局
• 导出/导入功能
• 历史版本管理
• 协作编辑功能

故障排除

常见问题

1. 可视化不显示

   • 检查 D3.js 是否正确加载
   • 确认 SVG 容器存在
   • 查看数据格式是否正确

2. 分析结果异常

   • 检查决策树结构完整性
   • 确认概率值设置正确
   • 验证结束节点收益值

调试模式

# 前端调试
npm run dev

贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

许可证

MIT License

联系方式

如有问题或建议，请提交 Issue 或联系开发团队。