Hierarchy Visualizer v1.0.0

基于 D3.js 的交互式多视图层级数据可视化工具。

适用场景

当用户希望可视化其 PRD、项目需求或任意层级结构数据时使用。该可视化工具从 JSON 文件读取数据，并将其渲染为交互式图表。

Agent 指令

步骤 1：查找或创建 PRD JSON 文件

若用户已有 Markdown/纯文本格式的 PRD：
将其转换为层级 JSON 格式。读取 PRD 文件，并构建如下 JSON 结构：

• 根节点 = 项目/PRD 标题
• 子节点 = 章节、功能点、需求项
• 状态（status）= todo / processing / problem / done（根据上下文推断；若无明确指示，默认为 "todo"）

若用户已拥有 JSON 文件：
直接使用该文件（优先检查 prd.json、requirements.json 或 hierarchy.json）

步骤 2：将可视化器复制到项目目录

# 将可视化器文件复制至用户项目目录
cp hierarchy-visualizer.html d3.min.js /path/to/user/project/

# 将 JSON 内容保存为 requirements-hierarchy.json
cat > /path/to/user/project/requirements-hierarchy.json << 'EOF'
{在此粘贴 JSON 内容}
EOF

# 在项目目录中启动本地服务器
cd /path/to/user/project && python3 -m http.server 8080

步骤 3：在浏览器中打开

http://localhost:8080/hierarchy-visualizer.html

维护说明（重要）

在整个项目开发过程中，必须持续更新 PRD JSON 文件：每次新增、修改、状态变更或删除任一需求/规格/功能时，均需同步更新该 JSON 文件。

数据格式

请将 PRD 内容转换为如下 JSON 结构：

{
  "id": "root",
  "title": "Product Requirements",
  "status": "processing",
  "children": [
    {
      "id": "auth",
      "title": "Authentication",
      "status": "done",
      "children": []
    }
  ]
}

必需字段：

• id — 唯一标识符（字符串）
• title — 显示名称（字符串）
• status — 取值范围为：todo、processing、problem、done
• children — 子节点数组（叶子节点对应空数组）

可选字段：type、domain、stage、owning_sig、granularity、complexity、source_url、goals

视图模式

• 列表模式 — 可折叠的层级列表（默认视图）
• 力导向图模式 — 支持拖拽的节点-连接线图
• 径向聚类模式 — 圆形树状图（dendrogram）

说明：分形树（Fractal Tree）视图目前处于开发中，将在后续版本中发布。敬请关注更新！

控制功能

• 视图切换器 — 左上角下拉菜单
• 缩放/平移 — 滚轮缩放，点击并拖拽平移
• 折叠/展开 — 点击节点，或使用 L1/L2/L3 按钮
• 状态筛选 — 点击 Todo / Proc / Prob / Done 标签
• 主题切换 — 右上角日/月图标
• 自动同步 — 每 5 秒自动重新加载 JSON 数据

状态颜色

• Todo：灰色 #8b949e
• Processing：黄色 #e3b341
• Problem：橙色 #ffa657
• Done：绿色 #238636

故障排查

可视化界面为空白？ → 请使用本地 HTTP 服务器访问，不要直接通过 file:// 协议打开

JSON 未加载成功？ → 请确认 requirements-hierarchy.json 与 HTML 文件位于同一目录下

需要自定义样式？ → 编辑 hierarchy-visualizer.html 中的 CSS 变量（约第 78 行）