**摘要**本文介绍了一款基于 Next.js D3.js 构建的网络流量安全分析可视化系统。该系统通过 **Louvain 社区发现算法**自动划分网络安全域利用 **Isolation Forest隔离森林算法**实现无监督异常检测并以力导向图形式直观呈现网络拓扑结构为安全运营中心SOC提供高效的威胁感知能力。一、项目背景与动机在当今复杂的网络环境中企业内网每天产生海量的网络流量日志。传统的日志分析方式存在以下痛点数据量大成千上万条连接记录人工审查几乎不可能关系隐蔽攻击行为往往隐藏在正常的网络通信模式中缺乏全局视角单条日志无法反映整体网络拓扑和威胁态势误报率高规则匹配方式难以应对未知的新型攻击为此我们开发了Cluster Intelligence—— 一个集数据导入、拓扑构建、社区划分、异常检测于一体的可视化安全分析平台。二、技术架构2.1 技术栈总览层级技术选型说明前端框架Next.js 16 (App Router)React 全栈框架支持 SSR/SSG可视化引擎D3.js Force Layout力导向图实现网络拓扑渲染UI 组件库shadcn/ui (Radix UI)高质量、可定制的组件库样式方案Tailwind CSS v4原子化 CSS支持暗色主题图计算Graphology Louvain网络图数据结构与社区发现异常检测Isolation Forest (自研)无监督异常检测算法语言TypeScript 5.x全类型安全的开发体验包管理器pnpm高效的依赖管理2.2 系统架构图┌─────────────────────────────────────────────────────┐ │ 用户界面层 │ │ ┌──────────┐ ┌──────────────┐ ┌───────────────┐ │ │ │ 侧边栏 │ │ 拓扑图画布 │ │ 节点详情面板 │ │ │ │ 数据导入 │ │ D3 Force │ │ 安全域/基线 │ │ │ │ 过滤控制 │ │ 力导向布局 │ │ 异常标记 │ │ │ └──────────┘ └──────────────┘ └───────────────┘ │ ├─────────────────────────────────────────────────────┤ │ 业务逻辑层 │ │ ┌─────────────┐ ┌────────────┐ ┌──────────────┐ │ │ │dataConverter│ │isolationForest│ │ mockData │ │ │ │ 日志→拓扑 │ │ 异常检测 │ │ 模拟数据生成 │ │ │ │ 社区发现 │ │ 特征提取 │ │ │ │ │ └─────────────┘ └────────────┘ └──────────────┘ │ ├─────────────────────────────────────────────────────┤ │ 数据层 │ │ ┌────────────────┐ ┌──────────────────────────┐ │ │ │ Excel (.xlsx) │ │ JSON (标准拓扑格式) │ │ │ │ 原始流量日志 │ │ nodes links metadata │ │ │ └────────────────┘ └──────────────────────────┘ │ └─────────────────────────────────────────────────────┘三、核心功能模块3.1 数据导入与转换系统支持两种数据格式的导入原始网络流量日志通常包含以下字段interface RawLog { proto: string; // 协议 (TCP/UDP) src: string; // 源 IP 地址 dst: string; // 目标 IP 地址 dport: number; // 目标端口 deviceDirection: string; // 流量方向 cdate: string; // 创建时间 sdate: string; // 开始时间 }数据转换流程原始日志 → 构建节点/边 → 图结构化 → Louvain社区检测 → Isolation Forest异常评分 → 拓扑数据关键转换逻辑 (src/lib/dataConverter.ts)1.节点统计从日志中提取每个 IP 的度数degree、入度/出度、收发字节数2.边的聚合相同源-目的对的连接聚合成一条边权重 连接次数3.角色推断根据主导端口自动识别节点角色Web服务、数据库、缓存等4.方向分析通过入度/出度比例判断节点是 Client / Server / Mixed支持直接导入预处理的拓扑数据interface TopologyData { metadata: TopologyMetadata; // 元信息 nodes: TopologyNode[]; // 节点数组 links: TopologyLink[]; // 边数组 domainNames?: Recordnumber, string; // 安全域名称映射 }3.2 Louvain 社区发现算法社区发现是本系统的核心能力之一。我们使用Louvain 算法将网络节点自动划分为若干个安全域每个域代表一组内部通信紧密的节点集合。Louvain 是一种基于模块度优化的无监督聚类算法1.初始化每个节点作为一个独立社区2.局部移动对每个节点尝试将其移到邻居节点的社区计算模块度增益选择增益最大的移动3.网络凝聚将同一社区的节点合并为一个超节点重复步骤 24.迭代直到模块度不再提升针对不同密度的网络图系统采用自适应分辨率参数// 根据图密度动态调整分辨率 let resolution 1.0; if (density 0.05) { resolution 1.5; // 稀疏图提高分辨率检测更细粒度的社区 } else if (density 0.1) { resolution 1.2; } else if (density 0.3) { resolution 0.8; // 密集图降低分辨率避免过度分割 }当 Louvain 算法产生的社区数量过少或某个社区过于庞大时50% 节点系统会自动切换到基于规则的分组策略分组依据 子网段(IP前两段) 端口角色 通信方向例如10.10.x.x-WebTier-Client和10.20.x.x-Database-Server会被分到不同的安全域。对于节点数 2 的碎片社区系统会将其合并到与其连接最紧密的大社区中保证最终结果的可解释性。3.3 Isolation Forest 异常检测异常检测是系统的另一大亮点。我们实现了完整的Isolation Forest隔离森林算法。Isolation Forest 的核心思想非常巧妙异常点更容易被孤立。具体来说1. 随机选择一个特征维度2. 在该特征的最大值和最小值之间随机选一个分割点3. 将数据分为左右子树4. 递归执行直到所有样本被隔离异常点由于稀疏且偏离主流分布往往在树的浅层就被隔离出来。$$s(x, n) 2^{-\frac{E(h(x))}{c(n)}}$$其中$h(x)$样本 $x$ 在森林中的平均路径长度$c(n)$给定样本数 $n$ 的归一化因子调和数分数范围 [0, 1]越接近 1 越可能是异常我们从每个节点提取 5 维特征用于异常检测// 特征向量设计 features [ degree, // 度中心性连接数越多越重要 inOutRatio, // 入度/出度比率流量不对称性 portCount, // 端口多样性开放端口多可能可疑 communitySize, // 所在社区大小小社区中的孤立节点更可疑 degreeInCommunity // 在社区内的相对重要性 ] export class IsolationForest { private trees: IsolationTree[] []; constructor(options: IsolationForestOptions {}) { this.nTrees options.nTrees ?? 100; // 默认 100 棵树 this.sampleSize options.sampleSize ?? 256; this.threshold options.threshold ?? 0.6; // 异常阈值 } fit(data: number[][]): void { for (let i 0; i this.nTrees; i) { const sample this.randomSample(data, this.sampleSize); const tree this.buildTree(sample); this.trees.push(tree); } } predict(data: number[][]): number[] { return data.map(point { const avgPathLength this.trees.reduce((sum, tree) sum this.pathLength(point, tree.root), 0) / this.trees.length; return Math.pow(2, -avgPathLength / this.c_n); // 异常分数 }); } }等级分数范围颜色含义Critical 0.75 红色脉冲立即排查High0.60 ~ 0.75 橙色重点关注Medium0.45 ~ 0.60 黄色建议关注Low 0.45 绿色正常范围3.4 拓扑可视化可视化部分基于D3.js Force Simulation实现力导向布局节点间的斥力 边的引力形成自然的拓扑分布社区着色不同安全域使用 12 色色板区分交互操作- 节点悬停放大 外发光增强- 点击查看详情IP、度数、流量、异常分数- 社区聚焦高亮选中社区淡化其他区域- 节点搜索定位- 边过滤按权重阈值筛选显示的连接动效设计- 异常节点红色脉冲动画2s 周期- 边过滤 opacity 渐变过渡 300ms- 社区聚焦摄像机平滑过渡3.5 安全基线管理系统内置了可配置的安全基线规则引擎const DEFAULT_BASELINE_RULES: BaselineRule[] [ { name: 异常分数过高, field: anomaly_score, operator: gt, threshold: 0.75, severity: critical }, { name: 超大发送流量, field: bytes_sent, operator: gt, threshold: 40*1024*1024, severity: medium }, { name: 连接数过高, field: degree, operator: gt, threshold: 35, severity: low }, ];用户可以自定义规则系统会实时标记违反基线的节点。四、视觉设计4.1 设计理念系统采用SOC安全运营中心风格的深色主题*深夜安全运营中心深色背景上的发光数据点如同雷达屏幕上的信号。*4.2 配色方案/* 背景 */--background: #060a14; /* 深空黑 */--panel: #0c1220; /* 面板底色 */--elevated: #141c2e; /* 浮起元素 *//* 强调色 */--primary: #00d4ff; /* 青色发光 — 主要交互 */--safe: #10b981; /* 翠绿 — 正常状态 */--warning: #f59e0b; /* 琥珀 — 警告 */--danger: #ef4444; /* 危红 — 异常/危险 */--info: #6366f1; /* 靛蓝 — 信息提示 *//* 社区色板12色循环 */#3b82f6, #ef4444, #10b981, #f59e0b, #8b5cf6, #ec4899,#06b6d4, #f97316, #84cc16, #6366f1, #14b8a6, #e11d484.3 字体规范UI 字体**Inter英文/ PingFang SC中文数据字体**JetBrains MonoIP地址、数值、代码标题**18-24px / font-weight 600正文**13-14px / font-weight 400数据标签**11-12px / monospace五、项目结构与关键文件src/├── app/│ ├── page.tsx # 主页面状态管理中心│ ├── layout.tsx # 根布局│ ├── globals.css # 全局样式 主题变量│ └── api/import/route.ts # 文件上传 API├── components/│ ├── topology-graph.tsx # ⭐ D3 拓扑图核心组件│ ├── sidebar.tsx # ⭐ 侧边栏控制面板│ └── ui/ # shadcn/ui 基础组件库├── lib/│ ├── dataConverter.ts # ⭐ 数据转换引擎社区发现异常检测│ ├── isolationForest.ts # ⭐ Isolation Forest 算法实现│ ├── types.ts # 类型定义 工具函数│ ├── mockData.ts # 模拟数据生成器│ └── utils.ts # 通用工具└── hooks/└── use-mobile.ts # 移动端响应式 Hook六、效果展示6.1 主界面系统主界面由三部分组成1.左侧控制面板数据导入、过滤控制、社区列表、基线规则配置2.中央拓扑画布D3 力导向图支持缩放、拖拽、节点交互3.顶部状态栏实时显示节点数、边数、社区数当前聚焦的安全域6.2 典型工作流① 导入 Excel 流量日志↓② 自动解析 → 构建 IP 节点和连接边↓③ Louvain 算法划分安全域如 Web层、数据库层、缓存层↓④ Isolation Forest 计算每个节点的异常分数↓⑤ 渲染拓扑图正常节点灰色、异常节点红色闪烁↓⑥ 安全分析师点击异常节点 → 查看详情 → 排查处置七、开源仓库本项目已开源至 GitHub欢迎 Star ⭐ 和 Issuehttps://github.com/HLIU5F/A# 克隆项目git clone https://github.com/HLIU5F/A.git# 安装依赖cd A pnpm install# 启动开发服务器pnpm dev# 浏览器访问 http://localhost:5000八、成果展示安全域九、总结与展望Cluster Intelligence 系统将图论算法与机器学习相结合为网络安全分析提供了一种全新的可视化思路能力技术方案效果网络拓扑构建Graphology 图结构从日志自动生成拓扑安全域划分Louvain 社区发现无监督自动分组异常检测Isolation Forest无需标注数据的检测可视化呈现D3.js 力导向图直观的交互式探索基线告警可配置规则引擎灵活的阈值管理未来规划支持实时数据流接入WebSocket / SSE引入时序分析检测异常的时间演化模式对接 SIEM 平台实现告警联动支持更多图算法PageRank、中心性指标等
**摘要**本文介绍了一款基于 Next.js D3.js 构建的网络流量安全分析可视化系统。该系统通过 **Louvain 社区发现算法**自动划分网络安全域利用 **Isolation Forest隔离森林算法**实现无监督异常检测并以力导向图形式直观呈现网络拓扑结构为安全运营中心SOC提供高效的威胁感知能力。一、项目背景与动机在当今复杂的网络环境中企业内网每天产生海量的网络流量日志。传统的日志分析方式存在以下痛点数据量大成千上万条连接记录人工审查几乎不可能关系隐蔽攻击行为往往隐藏在正常的网络通信模式中缺乏全局视角单条日志无法反映整体网络拓扑和威胁态势误报率高规则匹配方式难以应对未知的新型攻击为此我们开发了Cluster Intelligence—— 一个集数据导入、拓扑构建、社区划分、异常检测于一体的可视化安全分析平台。二、技术架构2.1 技术栈总览层级技术选型说明前端框架Next.js 16 (App Router)React 全栈框架支持 SSR/SSG可视化引擎D3.js Force Layout力导向图实现网络拓扑渲染UI 组件库shadcn/ui (Radix UI)高质量、可定制的组件库样式方案Tailwind CSS v4原子化 CSS支持暗色主题图计算Graphology Louvain网络图数据结构与社区发现异常检测Isolation Forest (自研)无监督异常检测算法语言TypeScript 5.x全类型安全的开发体验包管理器pnpm高效的依赖管理2.2 系统架构图┌─────────────────────────────────────────────────────┐ │ 用户界面层 │ │ ┌──────────┐ ┌──────────────┐ ┌───────────────┐ │ │ │ 侧边栏 │ │ 拓扑图画布 │ │ 节点详情面板 │ │ │ │ 数据导入 │ │ D3 Force │ │ 安全域/基线 │ │ │ │ 过滤控制 │ │ 力导向布局 │ │ 异常标记 │ │ │ └──────────┘ └──────────────┘ └───────────────┘ │ ├─────────────────────────────────────────────────────┤ │ 业务逻辑层 │ │ ┌─────────────┐ ┌────────────┐ ┌──────────────┐ │ │ │dataConverter│ │isolationForest│ │ mockData │ │ │ │ 日志→拓扑 │ │ 异常检测 │ │ 模拟数据生成 │ │ │ │ 社区发现 │ │ 特征提取 │ │ │ │ │ └─────────────┘ └────────────┘ └──────────────┘ │ ├─────────────────────────────────────────────────────┤ │ 数据层 │ │ ┌────────────────┐ ┌──────────────────────────┐ │ │ │ Excel (.xlsx) │ │ JSON (标准拓扑格式) │ │ │ │ 原始流量日志 │ │ nodes links metadata │ │ │ └────────────────┘ └──────────────────────────┘ │ └─────────────────────────────────────────────────────┘三、核心功能模块3.1 数据导入与转换系统支持两种数据格式的导入原始网络流量日志通常包含以下字段interface RawLog { proto: string; // 协议 (TCP/UDP) src: string; // 源 IP 地址 dst: string; // 目标 IP 地址 dport: number; // 目标端口 deviceDirection: string; // 流量方向 cdate: string; // 创建时间 sdate: string; // 开始时间 }数据转换流程原始日志 → 构建节点/边 → 图结构化 → Louvain社区检测 → Isolation Forest异常评分 → 拓扑数据关键转换逻辑 (src/lib/dataConverter.ts)1.节点统计从日志中提取每个 IP 的度数degree、入度/出度、收发字节数2.边的聚合相同源-目的对的连接聚合成一条边权重 连接次数3.角色推断根据主导端口自动识别节点角色Web服务、数据库、缓存等4.方向分析通过入度/出度比例判断节点是 Client / Server / Mixed支持直接导入预处理的拓扑数据interface TopologyData { metadata: TopologyMetadata; // 元信息 nodes: TopologyNode[]; // 节点数组 links: TopologyLink[]; // 边数组 domainNames?: Recordnumber, string; // 安全域名称映射 }3.2 Louvain 社区发现算法社区发现是本系统的核心能力之一。我们使用Louvain 算法将网络节点自动划分为若干个安全域每个域代表一组内部通信紧密的节点集合。Louvain 是一种基于模块度优化的无监督聚类算法1.初始化每个节点作为一个独立社区2.局部移动对每个节点尝试将其移到邻居节点的社区计算模块度增益选择增益最大的移动3.网络凝聚将同一社区的节点合并为一个超节点重复步骤 24.迭代直到模块度不再提升针对不同密度的网络图系统采用自适应分辨率参数// 根据图密度动态调整分辨率 let resolution 1.0; if (density 0.05) { resolution 1.5; // 稀疏图提高分辨率检测更细粒度的社区 } else if (density 0.1) { resolution 1.2; } else if (density 0.3) { resolution 0.8; // 密集图降低分辨率避免过度分割 }当 Louvain 算法产生的社区数量过少或某个社区过于庞大时50% 节点系统会自动切换到基于规则的分组策略分组依据 子网段(IP前两段) 端口角色 通信方向例如10.10.x.x-WebTier-Client和10.20.x.x-Database-Server会被分到不同的安全域。对于节点数 2 的碎片社区系统会将其合并到与其连接最紧密的大社区中保证最终结果的可解释性。3.3 Isolation Forest 异常检测异常检测是系统的另一大亮点。我们实现了完整的Isolation Forest隔离森林算法。Isolation Forest 的核心思想非常巧妙异常点更容易被孤立。具体来说1. 随机选择一个特征维度2. 在该特征的最大值和最小值之间随机选一个分割点3. 将数据分为左右子树4. 递归执行直到所有样本被隔离异常点由于稀疏且偏离主流分布往往在树的浅层就被隔离出来。$$s(x, n) 2^{-\frac{E(h(x))}{c(n)}}$$其中$h(x)$样本 $x$ 在森林中的平均路径长度$c(n)$给定样本数 $n$ 的归一化因子调和数分数范围 [0, 1]越接近 1 越可能是异常我们从每个节点提取 5 维特征用于异常检测// 特征向量设计 features [ degree, // 度中心性连接数越多越重要 inOutRatio, // 入度/出度比率流量不对称性 portCount, // 端口多样性开放端口多可能可疑 communitySize, // 所在社区大小小社区中的孤立节点更可疑 degreeInCommunity // 在社区内的相对重要性 ] export class IsolationForest { private trees: IsolationTree[] []; constructor(options: IsolationForestOptions {}) { this.nTrees options.nTrees ?? 100; // 默认 100 棵树 this.sampleSize options.sampleSize ?? 256; this.threshold options.threshold ?? 0.6; // 异常阈值 } fit(data: number[][]): void { for (let i 0; i this.nTrees; i) { const sample this.randomSample(data, this.sampleSize); const tree this.buildTree(sample); this.trees.push(tree); } } predict(data: number[][]): number[] { return data.map(point { const avgPathLength this.trees.reduce((sum, tree) sum this.pathLength(point, tree.root), 0) / this.trees.length; return Math.pow(2, -avgPathLength / this.c_n); // 异常分数 }); } }等级分数范围颜色含义Critical 0.75 红色脉冲立即排查High0.60 ~ 0.75 橙色重点关注Medium0.45 ~ 0.60 黄色建议关注Low 0.45 绿色正常范围3.4 拓扑可视化可视化部分基于D3.js Force Simulation实现力导向布局节点间的斥力 边的引力形成自然的拓扑分布社区着色不同安全域使用 12 色色板区分交互操作- 节点悬停放大 外发光增强- 点击查看详情IP、度数、流量、异常分数- 社区聚焦高亮选中社区淡化其他区域- 节点搜索定位- 边过滤按权重阈值筛选显示的连接动效设计- 异常节点红色脉冲动画2s 周期- 边过滤 opacity 渐变过渡 300ms- 社区聚焦摄像机平滑过渡3.5 安全基线管理系统内置了可配置的安全基线规则引擎const DEFAULT_BASELINE_RULES: BaselineRule[] [ { name: 异常分数过高, field: anomaly_score, operator: gt, threshold: 0.75, severity: critical }, { name: 超大发送流量, field: bytes_sent, operator: gt, threshold: 40*1024*1024, severity: medium }, { name: 连接数过高, field: degree, operator: gt, threshold: 35, severity: low }, ];用户可以自定义规则系统会实时标记违反基线的节点。四、视觉设计4.1 设计理念系统采用SOC安全运营中心风格的深色主题*深夜安全运营中心深色背景上的发光数据点如同雷达屏幕上的信号。*4.2 配色方案/* 背景 */--background: #060a14; /* 深空黑 */--panel: #0c1220; /* 面板底色 */--elevated: #141c2e; /* 浮起元素 *//* 强调色 */--primary: #00d4ff; /* 青色发光 — 主要交互 */--safe: #10b981; /* 翠绿 — 正常状态 */--warning: #f59e0b; /* 琥珀 — 警告 */--danger: #ef4444; /* 危红 — 异常/危险 */--info: #6366f1; /* 靛蓝 — 信息提示 *//* 社区色板12色循环 */#3b82f6, #ef4444, #10b981, #f59e0b, #8b5cf6, #ec4899,#06b6d4, #f97316, #84cc16, #6366f1, #14b8a6, #e11d484.3 字体规范UI 字体**Inter英文/ PingFang SC中文数据字体**JetBrains MonoIP地址、数值、代码标题**18-24px / font-weight 600正文**13-14px / font-weight 400数据标签**11-12px / monospace五、项目结构与关键文件src/├── app/│ ├── page.tsx # 主页面状态管理中心│ ├── layout.tsx # 根布局│ ├── globals.css # 全局样式 主题变量│ └── api/import/route.ts # 文件上传 API├── components/│ ├── topology-graph.tsx # ⭐ D3 拓扑图核心组件│ ├── sidebar.tsx # ⭐ 侧边栏控制面板│ └── ui/ # shadcn/ui 基础组件库├── lib/│ ├── dataConverter.ts # ⭐ 数据转换引擎社区发现异常检测│ ├── isolationForest.ts # ⭐ Isolation Forest 算法实现│ ├── types.ts # 类型定义 工具函数│ ├── mockData.ts # 模拟数据生成器│ └── utils.ts # 通用工具└── hooks/└── use-mobile.ts # 移动端响应式 Hook六、效果展示6.1 主界面系统主界面由三部分组成1.左侧控制面板数据导入、过滤控制、社区列表、基线规则配置2.中央拓扑画布D3 力导向图支持缩放、拖拽、节点交互3.顶部状态栏实时显示节点数、边数、社区数当前聚焦的安全域6.2 典型工作流① 导入 Excel 流量日志↓② 自动解析 → 构建 IP 节点和连接边↓③ Louvain 算法划分安全域如 Web层、数据库层、缓存层↓④ Isolation Forest 计算每个节点的异常分数↓⑤ 渲染拓扑图正常节点灰色、异常节点红色闪烁↓⑥ 安全分析师点击异常节点 → 查看详情 → 排查处置七、开源仓库本项目已开源至 GitHub欢迎 Star ⭐ 和 Issuehttps://github.com/HLIU5F/A# 克隆项目git clone https://github.com/HLIU5F/A.git# 安装依赖cd A pnpm install# 启动开发服务器pnpm dev# 浏览器访问 http://localhost:5000八、成果展示安全域九、总结与展望Cluster Intelligence 系统将图论算法与机器学习相结合为网络安全分析提供了一种全新的可视化思路能力技术方案效果网络拓扑构建Graphology 图结构从日志自动生成拓扑安全域划分Louvain 社区发现无监督自动分组异常检测Isolation Forest无需标注数据的检测可视化呈现D3.js 力导向图直观的交互式探索基线告警可配置规则引擎灵活的阈值管理未来规划支持实时数据流接入WebSocket / SSE引入时序分析检测异常的时间演化模式对接 SIEM 平台实现告警联动支持更多图算法PageRank、中心性指标等
