gravio-la/force-graph-demo

# Force Graph Explorer (3D & 2D) 一款全屏交互式力导向图可视化应用程序，支持**双重可视化模式**：3D 和 2D。基于 React、Bun、Three.js 和 Sigma.js 构建。 ## 功能特性 - **三种可视化模式（3D、Cosmo、2D）** - 🎲 **3D 力导向图** – 使用 `3d-force-graph` 和 Three.js 进行交互式 3D 探索 - 🌐 **Cosmo** – 使用 Cosmograph 实现 GPU 加速的图形视图 - 🔗 **2D 网络图** – 使用 Sigma.js 和 Graphology 的平面网络视图 - 通过底部中央的切换按钮随时切换模式 – 所有视图保持同步 - **多图形管理** - 📊 在独立的 JSON 文件中存储多个图形 - 🔄 使用下拉选择器（左上角）在图形之间切换 - 📝 每个图形都有元数据（名称、描述、时间戳） - ✏️ 通过应用内模态框（YAML 编辑器）添加和编辑自定义图形 - 🆕 包含随时可用的空白图形模板 - **交互元素** - 点击节点查看详细信息 - 实时搜索和过滤节点 - 永久显示的节点和边标签 - 流畅的动画和过渡效果 - **UI 组件** - 图形选择器下拉菜单（左上角） - 可展开的搜索覆盖层（右上角） - 节点信息面板（搜索框下方） - 可视化模式切换按钮（底部中央） - 所有覆盖层均具有背景模糊和现代风格 - **状态管理** - 使用 Zustand store 进行全局状态管理 - 持久化的图形数据结构 - 跨视图同步搜索和选择 ## 技术栈 - **运行时**: Bun - **框架**: React 19 - **样式**: Tailwind CSS 4 + shadcn/ui - **3D 可视化**: 3d-force-graph + Three.js - **Cosmo 可视化**: Cosmograph (@cosmograph/react) - **2D 可视化**: Sigma.js + Graphology - **状态管理**: Zustand - **UI 组件**: Radix UI (通过 shadcn)、CodeMirror (YAML 图形编辑器) ## 快速开始 ``` # 安装依赖 bun install # 启动开发 server bun run dev # 为生产环境 Build bun run build # 启动生产 server bun run start ``` ## 项目结构 ``` src/ ├── components/ │ ├── ForceGraph3D.tsx # 3D force graph visualization │ ├── CosmographGraph.tsx # Cosmo (Cosmograph) visualization │ ├── SigmaGraph.tsx # 2D network graph visualization │ ├── SearchOverlay.tsx # Search and filter UI │ ├── NodeInfoOverlay.tsx # Node details panel │ ├── VisualizationToggle.tsx # 3D / Cosmo / 2D mode switch │ ├── GraphSelector.tsx # Multi-graph dropdown selector │ ├── GraphEditorModal.tsx # Add/edit graphs (YAML) │ └── ui/ # shadcn components ├── lib/ │ ├── groupColors.ts # Central node group color palette │ └── utils.ts # Utilities ├── data/ │ ├── consciousness_graph.json # Default graph – philosophy of mind │ ├── philosophical-concepts.json # Steiner's philosophy graph │ ├── system-architecture.json # System architecture example │ └── empty-graph.json # Empty template graph ├── store/ │ └── graphStore.ts # Zustand state management ├── types/ │ ├── 3d-force-graph.d.ts # TypeScript definitions │ └── json.d.ts # JSON module declarations ├── App.tsx # Main application └── index.tsx # Server entry point ``` ## 图形数据 图形以 JSON 文件形式存储在 `src/data/` 目录中。每个文件包含： - **元数据**：名称、描述、时间戳 - **图形数据**：节点和链接 ### 可用图形 1. **consciousness_graph.json** – 心灵哲学（Bewusstsein）– *默认* 2. **system-architecture.json** – 微服务架构 3. **empty-graph.json** – 随时可用的空白模板 ### 管理图形 有关创建、编辑和管理图形的详细说明，请参阅 **[GRAPHS.md](./GRAPHS.md)**。 快速入门： - 点击左上角的下拉菜单在图形之间切换 - 使用下拉菜单中的 **Add new graph** 创建自定义图形（YAML 编辑器） - 在 `src/data/` 中编辑内置图形或创建新的 JSON 文件 - 使用 `empty-graph.json` 作为新图形的模板 ### 节点结构 ``` { id: string; // Unique identifier name: string; // Display name description?: string; // Detailed description group: number; // Color group (1-7) } ``` ### 链接结构 ``` { source: string; // Source node ID target: string; // Target node ID label?: string; // Edge label } ``` ## 键盘快捷键 - `Ctrl/Cmd + K`：切换搜索覆盖层 - `ESC`：关闭搜索覆盖层（展开时） ## 自定义 ### 颜色 节点颜色由组（1-7）定义。所有视图（3D、Cosmo、2D）和节点信息面板均使用统一的调色板。请在 **`src/lib/groupColors.ts`** 中编辑 `getGroupColor` 和 `GROUP_COLOR_PALETTE`。 ### 标签 - 节点标签：在 3D 和 2D 中始终可见 - 边标签：在两个视图中始终可见 - 文本大小和样式可在相应的组件文件中调整 ## 许可证 MIT

标签：3D可视化, Bun, Cosmograph, Graphology, React, Sigma.js, Syscalls, Tailwind CSS, Three.js, WebGL, Webhook, YAML编辑器, Zustand, 交互式图表, 关系图谱, 力导向图, 图可视化, 图形学, 基线检查, 网络拓扑图, 自动化攻击