Graph Browser — 使用说明

多图数据库可视化浏览器，支持 Neo4j 和 FalkorDB。基于 D3.js 力导向图渲染，SSE 流式加载，逐跳 BFS 展开。

安装与启动

cd graph-browser
npm install

# 同时启动前端和后端
npm run start

# 或分别启动
npm run server         # 后端 → http://0.0.0.0:3008
npm run dev            # 前端 → http://0.0.0.0:3009

启动后浏览器访问 http://localhost:3009。

1. 登录

打开后进入登录页面，填写以下信息：

选择数据库类型

• Neo4j — 使用 Bolt 协议（默认端口 7687）
• FalkorDB — 使用 Redis 协议（默认端口 6379）

选择连接方式

• Host / Port — 手动填写主机地址和端口号
• URL — 直接粘贴连接字符串，例如：
  • Neo4j: bolt://localhost:7687
  • FalkorDB: redis://localhost:6379

用户名 / 密码 — 如果数据库需要认证则填写，否则留空。

点击 Connect 按钮，连接成功后自动跳转到图浏览页面。

• 登录信息会自动保存，下次打开自动填充上次的连接参数
• 会话有效期 30 天，期间无需重新登录

2. 图浏览

登录成功后，系统自动执行以下操作：

1. 从顶部下拉框选择数据库（默认使用上次选中的数据库）
2. 取出第 1 个节点作为种子
3. 通过 SSE 流式逐跳 BFS 展开 N 跳（默认 3 跳），每跳数据实时渲染
4. 将所有节点和边渲染为 D3.js 力导向图，模拟稳定后自动缩放适配画板

图的交互

操作	效果
鼠标滚轮	缩放图形
拖拽空白区域	平移画布
拖拽节点	移动单个节点位置
鼠标悬停节点	显示节点属性 tooltip（精简版）
双击节点	以该节点为中心展开 N 跳关系，替换当前图
右键节点/边	弹出全屏详情面板，查看完整属性

数据库选择

• 页面顶部有可搜索的数据库下拉框
• 支持输入关键字过滤
• 切换数据库后自动重新加载初始数据
• 上次选中的数据库会保存到 localStorage

节点显示

• 大小：节点圆圈大小与连接边数成正比，使用饱和函数 BASE × (1 + 2d/(d/2 + N))，最大不超过基础大小的 3 倍
• 颜色：按 label 自动分配颜色，15 色调色板循环
• 光晕：入口节点（种子节点）显示发光效果，便于识别起点
• 标签：节点下方显示 name/title/id 等属性

详情面板

右键点击节点或边，弹出全屏详情面板：

• 显示所有属性（长字段截断到 500 字符）
• 被截断的属性旁有 🔍 View full 按钮
• 点击后加载完整属性值，在新页面展示
• 点击遮罩层或 ✕ 关闭面板

流式加载

所有数据加载（初始加载、查询、展开）均使用 SSE 流式传输：

• 每跳 BFS 结果实时推送到前端
• 图形逐步渲染，无需等待全部数据返回
• 节点数达到上限（默认 1000）时自动停止并提示
• 加载中鼠标显示等待图标，画布冻结不可交互

3. Cypher 查询

页面顶部有 Cypher 查询输入框：

• 输入任意 Cypher 语句
• 按 Ctrl+Enter 或点击绿色 ▶ 按钮执行
• 系统会自动对查询结果中的节点展开 N 跳关系

示例查询：

-- 查找所有 Person 节点
MATCH (n:Person) RETURN n LIMIT 20

-- 查找两个节点之间的路径
MATCH path=(a)-[*..3]-(b) WHERE a.name = 'Alice' AND b.name = 'Bob' RETURN path

-- 查找某个节点的直接邻居
MATCH (n)-[r]-(m) WHERE n.name = 'Alice' RETURN n, r, m

查询历史

• 点击输入框右侧的 🕐 按钮打开历史记录
• 保存最近 100 条查询
• 点击任意历史记录可回填到输入框
• 历史记录存储在浏览器 localStorage 中，关闭页面不会丢失

4. 设置

点击右上角 ⚙️ 齿轮按钮打开设置面板：

节点间距（Node Spacing）

• 滑块范围：1 — 100
• 默认值：30
• 控制力导向图中节点之间的距离
• 值越小节点越紧凑，值越大节点越分散

展开跳数（Expansion Hops）

• 滑块范围：1 — 10
• 默认值：3
• 影响所有展开操作：
  • 登录后的初始加载
  • Cypher 查询结果的自动展开
  • 双击节点的展开

查询超时（Query Timeout）

• 滑块范围：5 — 300 秒
• 默认值：60 秒
• 超时后停止查询并提示用户减少跳数

建议：

• 小型图（< 1000 节点）：可以设置 3-5 跳
• 大型图（> 10000 节点）：建议设置 1-2 跳，避免加载过多数据

所有设置自动保存到 localStorage，下次打开浏览器仍然生效。

5. 断开连接

点击右上角 Disconnect 按钮断开数据库连接，返回登录页面。

环境变量

变量	默认值	说明
PORT	3008	后端服务端口

# 示例：使用自定义端口
PORT=8080 npm run server

如果修改了后端端口，需要同步修改 vite.config.ts 中的 proxy 目标地址。