简介这款拓扑图插件基于antvg6封装面向网络管理员、系统架构师及前端开发者用于构建可自定义的网络拓扑可视化方案。包内共29个文件以14个js核心代码、7个gif动态演示、2个json配置和2个png图标为主另含说明txt、docx附赠资源及README整体仅1.2MB结构清晰便于快速集成。插件内置缩放节点、警告节点、播放警告节点等多样节点并提供流动边、信息流边、警告流边、二次标签边等动态连线可直观呈现数据流向与告警状态同时支持自定义右键菜单满足个性化交互需求。该插件通过颜色、样式和动画变化强化异常提示基于成熟antvg6框架保证了良好的兼容性与可扩展性能轻松融入现有前端项目。已有80人学习下载附带的示例代码、效果图及配置文档可帮助快速上手适用于深度分析和管理复杂网络架构。1. 为什么用 AntV G6 而不是从零画拓扑图做网络拓扑图插件时最常被问到的就是AntV G6 能不能支持自定义节点和动态连线答案是可以但直接写底层配置很繁琐。这套基于 AntV G6 封装的拓扑图插件把最常用的几种节点和连线预先实现好开箱即用。它内置缩放节点、警告节点、播放警告节点以及流动边、信息流边、警告流边、二次标签边同时把右键菜单行为暴露成可配置项。对于网络管理员和系统架构师它能把设备状态、链路质量直接映射成视觉变化对于前端工程师它是一个可以二次开发的 G6 扩展包。我更关注的是它的实现方式什么时候用自定义节点什么时候用 setState动画怎么不加戏菜单怎么不打断操作。这些在后面的章节都会拆开讲。2. 自定义节点缩放、警告、播放警告的实现与选型2.1 G6 自定义节点的注册机制G6 中所有自定义节点都走G6.registerNode(name, methods, parentType)。第一个参数是节点类型名数据里type字段直接引用第二个参数是重写的方法集合第三个参数指定继承的内置类型常见是circle、rect、ellipse。这个插件里默认继承circle因为网络拓扑里的主机、路由器、交换机大多用圆形标识圆形也更容易做缩放和告警光晕。下面的代码演示了如何在draw方法里拿到配置并返回图形组。cfg是当前节点数据group是 G6 的图形容器可以往里添加多个图形元素。G6.registerNode(warningNode, { draw(cfg, group) { const { size 40, warning false } cfg; const keyShape group.addShape(circle, { attrs: { x: 0, y: 0, r: size / 2, fill: warning ? #fff1f0 : #e6fffb, stroke: warning ? #ff4d4f : #13c2c2, lineWidth: warning ? 3 : 1.5 }, name: keyShape }); if (warning) { group.addShape(text, { attrs: { x: 0, y: 0, textAlign: center, textBaseline: middle, text: !, fill: #ff4d4f, fontSize: 16, fontWeight: bold }, name: warning-text }); } return keyShape; } }, circle);这里的要点是draw必须返回keyShapeG6 后续的setState、碰撞检测都以它为主。name字段用来在group.find(e e.get(name) xxx)里定位图形推荐给所有子图形都起名否则后续动画找不到目标。warningNode这个名字对应资源包里的warningNode.png数据里只要把type写成warningNode就能直接使用。2.2 缩放节点把业务指标映射到 node size缩放节点在插件里叫zoomNode它的核心不是绘制新形状而是把数据里的数值字段映射成节点半径。我会在注册前做一次归一化避免直接拿 CPU 使用率这种原始值画圆。下面这个例子读取value字段范围 0 到 100映射到 16 到 80 像素的半径。G6.registerNode(zoomNode, { draw(cfg, group) { const { value 50, minSize 16, maxSize 80 } cfg; const ratio Math.max(0, Math.min(1, value / 100)); const r minSize (maxSize - minSize) * ratio; return group.addShape(circle, { attrs: { x: 0, y: 0, r, fill: #1890ff, fillOpacity: 0.2, stroke: #1890ff, lineWidth: 2 }, name: keyShape }); } }, circle);实际工程里不建议把value / 100写死。我在封装时会从cfg.maxValue、cfg.minValue读取真实刻度再归一化这样负载 50% 和流量 500MB/s 都能映射到同一套比例。缩放节点适合表达流量、负载、在线人数这类连续指标。如果指标超过阈值可以额外叠加一个红色外环这个外环放在draw里画第二个circle即可。注意外环不要带name: keyShape否则setState会错误更新到它。下面是一张节点选型对照表方便在写业务时快速决定用哪种。节点类型视觉特征适用数据字段动画复杂度zoomNode半径随数值变化负载、流量、在线人数低warningNode红蓝切换 三角感叹号告警状态、健康度低playWarnNode光晕或闪烁扩散正在播放的警告事件中2.3 警告节点与播放警告节点状态与动画叠加警告节点的warning字段控制颜色实际使用中警告状态会由后端推送或者轮询得到因此需要在update或setState中响应变化。一个常见做法是给节点注册自定义状态而不在draw里写死颜色。播放警告节点在插件里叫playWarnNode它在警告节点的外观之上加了一层扩散波纹动画提醒操作者这是「正在发生的告警」而不是「历史告警」。G6.registerNode(playWarnNode, { draw(cfg, group) { const keyShape group.addShape(circle, { attrs: { x: 0, y: 0, r: 20, fill: #fff1f0, stroke: #ff4d4f, lineWidth: 3 }, name: keyShape }); group.addShape(circle, { attrs: { x: 0, y: 0, r: 10, fill: rgba(255, 77, 79, 0.4), stroke: #ff4d4f, lineWidth: 2 }, name: warn-ring }); return keyShape; }, afterDraw(cfg, group) { const ring group.find(e e.get(name) warn-ring); if (!ring) return; ring.animate((ratio) { return { r: 10 ratio * 30, opacity: 1 - ratio }; }, { duration: 1500, repeat: true }); } }, circle);插件包里的animate目录正是把这些动画单独拆分便于在图表空闲时批量停掉。播放警告节点和警告节点最大的差别是警告节点是静态状态播放警告节点是事件流。前者用setState(warning, true)触发后者通常在新增数据时插入一个带playWarnNode的节点播放完再删除或转为普通警告节点。如果在afterDraw里直接启动动画要小心重复执行G6 在视图更新时会多次调用afterDraw所以最好用节点身上的__playFlag字段做防重入。提示如果发现动画导致页面频繁重绘可以先调用graph.stopAnimate(true)在需要时再手动启动。大数据量拓扑图建议默认关动画只对高亮节点开。3. 动态连线流动边、信息流边、警告流边与二次标签边3.1 边的数据模型与注册入口G6 的边和节点类似用G6.registerEdge(name, methods, parentType)注册。边数据中至少有source和targettype指定边类型。这个插件里的四种边分别解决不同的问题flowEdge负责传达正在发生的数据流flowInfoEdge在流动基础上追加文字说明flowWarnEdge用颜色和脉冲表达异常quadraticLabelEdge解决复杂拓扑中的标签重叠。选型时先问一个问题这条边除了连接两个节点还要让读者看到什么3.2 流动边与信息流边动画路径与流向标识流动边的做法是给lineDash配一个动画。G6 里可以覆写afterDraw用shape.animate更新 dash 偏移量。因为 G6 的边默认会生成名为keyShape的图形所以直接找到它再启动动画比遍历group.get(children)更可靠。G6.registerEdge(flowEdge, { afterDraw(cfg, group) { const shape group.find(e e.get(name) keyShape); if (!shape) return; const length shape.getTotalLength ? shape.getTotalLength() : 100; shape.animate((ratio) { return { lineDashOffset: -1 * ratio * length }; }, { duration: 2000, repeat: true }); } }, quadratic);lineDashOffset的负号表示流动方向数值越大流动越快数值越小则越缓慢。流动边适合表达实时建连、数据请求、消息推送等场景。flowInfoEdge则在流动边基础上增加label配置它继承自流动边在draw方法里额外添加一个文本图形。文本可以是链路名称、吞吐量或者最近一条告警消息。注意不要给所有边都加动画。拓扑图里边数量一多动画会占据大量主线程。我通常会把流动边数量控制在 50 条以内超过 50 条时改用静态虚线加箭头。3.3 警告流边颜色与状态的联动警告流边是flowWarnEdge它的核心是状态切换。正常时它是灰色静态边当链路发生抖动时通过graph.setItemState(edge, warning, true)让边变成红色并启动闪烁。实现时覆写getStateStyle比手动改 attr 更稳妥因为 G6 的内部状态机在状态清除时会自动恢复原样式。G6.registerEdge(flowWarnEdge, { getStateStyle(name, value, item) { const style {}; if (name warning value) { style.stroke #ff4d4f; style.lineWidth 3; style.lineDash [6, 4]; } return style; }, afterDraw(cfg, group) { const shape group.find(e e.get(name) keyShape); if (shape) { shape.animate((ratio) { return { lineDashOffset: -ratio * 40, opacity: 0.6 0.4 * Math.sin(ratio * Math.PI * 2) }; }, { duration: 800, repeat: true }); } } }, quadratic);这里的getStateStyle会在状态变化时自动调用不需要手工刷新。实际项目中警告流边还要响应节点警告状态比如当目标节点进入warning状态时所有连到它的边立即变红。这个逻辑放在菜单行为那一章再细化。quadraticLabelEdge则更多是布局层面的调整它把贝塞尔曲线的控制点向上偏移一段距离避免两条方向相反的边重叠在一起然后在中点放置第二个标签。边类型与参数速查表如下。边类型核心图形动画方式典型场景flowEdge虚线路径lineDashOffset 偏移数据流通量展示flowInfoEdge虚线路径 label流动 文本带日志信息的数据流flowWarnEdge实线/虚线切换闪烁 偏移链路质量下降告警quadraticLabelEdge二次贝塞尔曲线无动画双向链路同时存在时提示二次标签边最容易被误读为普通边在注册时一定要设置style.endArrow: true并且给标签设置background和padding否则文字会直接压在线上难以阅读。4. 自定义右键菜单从行为到交互闭环4.1 事件绑定与菜单渲染G6 提供node:contextmenu、edge:contextmenu和canvas:contextmenu事件。内置的 Menu 插件适合简单场景但做网络拓扑时我更倾向于手写一个 DOM 菜单因为菜单项需要跟节点类型、权限、甚至告警状态联动。具体做法是在初始化时给graph.on(node:contextmenu, handler)绑定事件在handler里阻止浏览器默认菜单并渲染自定义 div。graph.on(node:contextmenu, (evt) { evt.preventDefault(); const item evt.item; const { x, y } evt.canvasPoint; const type item.getModel().type; const menu buildMenu(type, item); showMenuAt(menu, x, y); }); graph.on(edge:contextmenu, (evt) { evt.preventDefault(); const item evt.item; const { x, y } evt.canvasPoint; const model item.getModel(); const menu buildEdgeMenu(model, item); showMenuAt(menu, x, y); });evt.canvasPoint是鼠标在 canvas 坐标系中的位置因为画布可能被平移缩放直接使用evt.clientX/clientY会导致菜单定位错位。buildMenu根据节点类型返回菜单项数组比如缩放节点可以显示固定当前大小警告节点显示查看告警详情播放警告节点显示停止播放动画。4.2 菜单项按节点/边类型动态生成下面的buildMenu就是一个典型的策略分发把不同类型对应到不同操作同时允许外部传入一个contextMenuConfig来覆盖默认行为。插件包里的self-contextmenu.gif展示的正是这个流程。const DEFAULT_NODE_MENUS { zoomNode: [ { label: 定位到设备, action: locate }, { label: 调整缩放比例, action: resize } ], warningNode: [ { label: 标记已处理, action: resolve }, { label: 设为播放警告, action: play } ], playWarnNode: [ { label: 停止告警动画, action: stop }, { label: 转为警告节点, action: toWarning } ] }; function buildMenu(type, item) { return DEFAULT_NODE_MENUS[type] || [{ label: 节点详情, action: detail }]; }这里返回的是菜单配置真正的执行逻辑放在事件回调里。菜单项的意义不只是展示文字还要告诉使用者这个操作会改变画布上的什么。如果某个菜单项不适用于当前节点比如对playWarnNode显示调整缩放比例用户会感到困惑。所以策略表要尽量和节点类型一一对应而不是共用一套通用菜单。4.3 菜单行为与图形状态联动菜单不能只是展示点击后必须改变图形状态。这里要注意graph.setItemState只能更新 G6 内部状态如果要改数据里的业务字段最好先graph.updateItem(item, { ...model, warning: false })再调用setItemState刷新样式。否则下次重绘时又会回到旧状态。以标记已处理为例点击后应该把节点从警告节点切换成普通节点。function resolveWarning(item) { const model item.getModel(); const updated { ...model, type: zoomNode, warning: false }; graph.updateItem(item, updated); graph.setItemState(item, warning, false); graph.emit(after-resolve-warning, { item }); }这里的逻辑是先更新数据然后清除 G6 状态最后触发自定义事件方便外部埋点和联动。如果直接修改 model 而不updateItem画布上不会有任何变化如果只setItemState而不改 model刷新页面后警告状态会复活。右键菜单的行为联动还可以延伸到边上右键一条flowWarnEdge可以选择忽略告警此时边从红色恢复为默认色。实现方式与节点一致只需要在edge:contextmenu中把action分发到对应的处理函数。为了避免菜单覆盖整张图右键菜单一定要在 canvas 外点击或滚动时自动隐藏可以监听canvas:click和canvas:wheel来销毁当前菜单实例。操作场景触发对象菜单动作底层调用设备负载查看zoomNode调整缩放比例updateItem refresh告警处理warningNode标记已处理updateItem setItemState告警降噪playWarnNode停止告警动画stopAnimate setItemState链路误报flowWarnEdge忽略告警clearState updateItem5. 动画性能、排错与验证技巧最后落到实际开发上。这个插件包虽然开箱即用但真正要把动画和菜单用稳还得掌握下面几个技巧。第一动画不要全局开着。G6 中动画分布在节点和边的afterDraw里属于持续占用渲染帧的类型。对于超过 300 个节点或 500 条边的拓扑图我会在初始化时传animate: false然后把要展示动态效果的部分单独标记为playWarnNode或flowEdge只给这部分启动动画。需要批量停止时使用graph.stopAnimate(true)但它会停掉所有动画包括正在播放的警告动画。更好的做法是在插件内部维护一个动画 ID 列表点击菜单里的停止告警动画时只对目标节点执行const item graph.findById(targetId); const group item.getContainer(); group.find(e e.get(name) warn-ring).stopAnimate();第二动画不生效时先检查三件事注册名和数据里的 type 是否一致draw/afterDraw是否返回了keyShapegroup.animate是否在afterDraw里重复调用导致覆盖。最常见的是把animate写在了draw里而draw只执行一次真正改尺寸时不会重新触发动画。另外如果节点被graph.hideItem隐藏再显示动画实例会丢失需要重新调用graph.refreshItem(item)。第三右键菜单定位问题在与 G6 缩放交互并存时尤其明显。由于我们使用了canvasPoint定位画布缩放后 DOM 菜单不会跟着放大所以菜单字体还是用固定像素比较稳妥。如果画布被drag-canvas拖动还要在canvas:drag开始前关闭菜单。验证方法可以写成一段简单脚本遍历所有节点检查每个zoomNode的半径和数据中的 value 是否成正比检查warningNode是否存在红色描边。这部分在 CI 里跑一遍能快速暴露组件在数据更新后的回归问题。graph.getNodes().forEach(node { const model node.getModel(); if (model.type zoomNode) { const key node.getKeyShape().attr(); const expectedR normalize(model.value) * 32; if (Math.abs(expectedR - key.r) 0.1) { console.warn(zoomNode ${model.id} 尺寸未同步); } } });最后一个小技巧把右键菜单的行为抽成一个纯函数不直接操作 graph而是返回要执行的命令。这样菜单的单元测试就变成了命令队列的测试属于能从项目里带走的东西。本文还有配套的精品资源点击获取