一、Demo 简介
六度人脉关系分析器是一个基于 Web 的交互式人际关系网络可视化工具。它模拟了现实世界中人们通过手机通讯录、QQ、微信、声纹设备以及地点聊天记录等多维数据，自动构建关系图谱，并支持"六度分隔"路径查找。
产品形态： 单页 Web 应用（HTML + D3.js），无需后端，浏览器打开即可体验
面向用户： 对社交网络分析感兴趣的人、想了解"六度分隔理论"实际运作方式的用户、以及需要可视化呈现人脉关系的场景
核心功能：
多维关系网络构建：自动整合手机通讯录、QQ 好友、微信好友、声纹匹配、地点聊天记录共 5 种关系来源，生成一张完整的力导向关系图谱
六度路径查找：任选两个人物，系统通过 BFS 算法在 6 度以内查找最短关联路径，并在图中高亮整条链路，其余节点自动淡化
实时关系更新模拟：系统每 3 秒自动"发现"一条新关系，动态更新网络密度与日志，模拟真实的关系分析系统持续运转状态
人物详情面板：点击任意节点，可查看该人物的关系总数、各类关系分布、网络中心度等详细统计
整体网络图
二、Demo 创作思路
灵感来源
社会心理学中著名的"六度分隔理论"指出：地球上任意两个陌生人之间，平均只需要不超过 6 个中间人就能建立联系。这个理论听起来很抽象，我一直想做一个能把它"可视化"的工具，让人直观看到关系网络是如何编织起来的。
想解决的问题
市面上的人脉管理工具大多是列表形式（通讯录、好友列表），人一旦超过几十个就难以感知整体结构。用户无法回答这样的问题：“我和一个陌生人之间究竟隔了几层关系？” “哪些人处于社交网络的核心位置？” 这个 Demo 尝试用图的方式回答这些问题。
为什么做这个方向
关系分析是一个天然的图论问题，用 D3.js 的力导向图来呈现非常合适。同时这个主题贴近生活（每个人都身处社交网络中），作为 Demo 既有技术深度又有直观可玩性，评审和观众都能快速理解价值。
三、Demo 体验地址
交互式 HTML 文件已打包为 ZIP，下载后用浏览器打开 relationship_analyzer.html 即可直接体验，无需任何安装或部署。
relationship_analyzer.zip (9.9 KB)
四、TRAE 实践过程
整个 Demo 从 0 到 1 完全由 TRAE 辅助完成，核心开发流程如下：
第一阶段：需求拆解与架构设计
我在 TRAE 中描述了完整的创意需求：一个能分析人际关系、支持六度路径查找、用 D3.js 可视化的单页应用。TRAE 帮我把需求拆解为四个模块：数据模拟层、关系分析引擎、六度路径算法、D3 可视化层。这个拆解让我能快速抓住开发重点，避免在无关细节上浪费时间。
第二阶段：数据模拟与关系生成
TRAE 生成了一整套模拟数据逻辑：60 个虚拟人物，每人拥有姓名、职业、公司、手机号、QQ、微信、声纹 ID 和常去地点。关系生成规则覆盖了 5 种维度——同公司自动生成手机通讯录关联、随机 QQ/微信 好友、同地点触发声纹匹配和聊天记录交集。这种多维度的关系生成让网络看起来真实且有层次。
第三阶段：六度路径算法实现
TRAE 用 JavaScript 实现了基于邻接表的 BFS 最短路径算法，并严格限制了搜索深度不超过 7 跳（即 6 个中间人）。算法返回路径后，前端通过 D3 的选择器批量添加 highlighted / dimmed 类，实现路径高亮与背景淡化的视觉效果。
第四阶段：UI 打磨与交互优化
TRAE 为整个应用设计了深色科技风格的界面：左侧边栏放置路径搜索、图例与实时日志；右侧主画布运行 D3 力导向图；浮动控制条提供缩放、暂停模拟等操作。所有交互（节点拖拽、点击详情、路径查找、实时更新）均通过 TRAE 迭代调试完成。
关键步骤截图
截图 1：整体关系网络图 整体网络图
60 个人物、上千条关系在力导向图中自然聚类，不同颜色的连线代表不同类型的关系（手机/QQ/微信/声纹/地点）。
截图 2：节点详情面板 节点详情
点击任意人物节点，右侧面板会展示该人物的关系统计，包括各类关系数量和网络中心度。
截图 3：六度路径查找结果 路径查找
选择人物 A 和人物 B 后，系统自动计算最短路径并在图中高亮显示，同时在顶部展示完整路径与度数。
关键任务 Session ID
以下是我用 TRAE 完成本 Demo 时的关键对话 Session ID，用于证明作品由 TRAE 开发完成：
架构设计与数据模型生成：4466687898818336:98db7739bc6c7810b47abeb925fc26b2_6a4618442cd16f0eb3d4a2f5.6a46184566935bbceb2015f0.6a4618442cd16f0eb3d4a2f6:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/2 15:58:40)
Session ID 获取方式：在 TRAE 中双击对应对话的头像即可复制。
附：社区报名帖
我的报名帖链接：[请替换为你的报名帖链接]
补充说明
本 Demo 使用纯前端技术（HTML + CSS + JavaScript + D3.js v7），无需后端服务，用浏览器直接打开即可完整运行
所有人物、公司与地点均为随机生成，不涉及任何真实个人信息
关系分析逻辑虽然基于模拟数据，但算法层面（BFS 最短路径、力导向图布局、中心度计算）完全可用于真实场景