数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载边过滤镜EdgeFilterLens是 G6 内置的透镜类探索工具它会在画布上绘制一个圆形透镜只有被关注的边才会在透镜范围内显示其余边在该范围内被隐藏。本文将基于 EdgeFilterLens 官方示例 与 插件源码完整讲解它的配置项、四种边显示条件、动态更新方法及底层实现原理帮助你在大规模关系图中快速聚焦局部连接关系。插件概述透镜内只保留你关注的边边过滤镜插件可以将关注的边保留在过滤镜范围内其他边将在该范围内不显示。它是一个重要的可视化探索工具可以帮助用户聚焦于特定区域的边关系。其典型使用场景包括需要聚焦查看局部区域的边关系在复杂网络中突出显示特定节点之间的连接。从实现上看插件在画布的transient临时图层上创建了一个圆形透镜Circle并把聚焦区域内的节点、边以克隆副本的方式叠加渲染到透镜之上而原始画布中的其他元素则被透镜本身遮盖从而在视觉上实现只显示范围内关注边的效果。快速上手两种初始化方式边过滤镜插件已经内置注册在 G6 中无需额外引入即可使用。最简单的配置方式是用字符串简写直接启用const graph new Graph({ plugins: [edge-filter-lens], });需要调整参数时使用配置对象形式const graph new Graph({ plugins: [ { type: edge-filter-lens, trigger: pointermove, // 跟随鼠标移动 r: 60, // 设置透镜半径 nodeType: both, // 边的显示条件 }, ], });创建实例后调用graph.render()即可看到效果鼠标在画布上移动时一个圆形透镜会跟随指针透镜内的边被点亮透镜外的边被遮挡隐藏。配置项详解以下为 EdgeFilterLens 插件的完整配置项与 EdgeFilterLens 官方手册 及源码中 EdgeFilterLensOptions 接口 保持一致属性描述类型默认值必选type插件类型stringedge-filter-lens✓key插件的唯一标识可用于获取插件实例或更新插件选项string-trigger移动透镜的方式pointermove|click|dragpointermover透镜的半径number60maxR透镜的最大半径仅在scaleRBy为wheel时生效number画布宽高最小值的一半minR透镜的最小半径仅在scaleRBy为wheel时生效number0scaleRBy缩放透镜半径的方式wheelwheelnodeType边显示的条件both|source|target|eitherbothfilter过滤出始终不在透镜中显示的元素(id, elementType) boolean() truestyle透镜圆形的样式object见下文 style 表nodeStyle在透镜中节点的样式[NodeStyle] |(datum) NodeStyle{ label: false }edgeStyle在透镜中边的样式[EdgeStyle] |(datum) EdgeStyle{ label: true }preventDefault是否阻止默认事件booleantrue以上默认值在源码的 defaultOptions 中有完整定义static defaultOptions: PartialEdgeFilterLensOptions { trigger: pointermove, r: 60, nodeType: both, filter: () true, style: { lineWidth: 2 }, nodeStyle: { label: false }, edgeStyle: { label: true }, scaleRBy: wheel, preventDefault: true, };trigger透镜如何移动pointermove透镜始终跟随鼠标移动默认click鼠标点击画布时透镜移动到点击位置drag通过拖拽方式移动透镜。源码在 bindEvents 中按触发方式分别注册事件click与drag走CLICK监听pointermove走POINTER_MOVE监听drag额外监听DRAG_START/DRAG/DRAG_END三个事件并借助isLensDragging标志位判断拖拽是否命中透镜内部。nodeType边的显示条件这是插件最核心的过滤逻辑四种取值决定了什么样的边会在透镜中显示源码见 getFocusElementsboth只有起始节点和目标节点都在透镜中时边才会显示source只有起始节点在透镜中时边才会显示target只有目标节点在透镜中时边才会显示either起始节点或目标节点任一在透镜中时边就会显示。对应源码的判定逻辑为const isSourceFocus focusNodeIds.includes(source); const isTargetFocus focusNodeIds.includes(target); switch (this.options.nodeType) { case both: return isSourceFocus isTargetFocus; case either: return isSourceFocus ! isTargetFocus; case source: return isSourceFocus !isTargetFocus; case target: return !isSourceFocus isTargetFocus; }从源码可以看出either模式实际实现为异或isSourceFocus ! isTargetFocus即恰好一个端点落入透镜的边才会显示——这与只要有一个端点在透镜中就显示的语义在数学上等价于两边端点不同时落入的边。需要完整展示端点跨透镜的连接关系时either是最直观的选择。r / minR / maxR / scaleRBy透镜半径控制r透镜初始半径默认 60minR/maxR半径缩放的范围限制仅在scaleRBy: wheel时生效maxR默认取画布宽高最小值的一半scaleRBy: wheel通过滚轮缩放透镜半径。滚轮缩放的实现位于 scaleRByWheel当滚轮事件位置与透镜中心距离小于半径时按DELTA 0.05的步进因子放大或缩小半径并通过Math.max(minR, Math.min(maxR, r * ratio))钳制在[minR, maxR]区间内随后重绘透镜与聚焦元素。filter永久排除指定元素filter接收一个回调(id, elementType) boolean返回false的元素将始终不出现在透镜中即使它位于透镜范围内。元素类型elementType取值为node/edge/combo。例如排除某条特定边plugins: [ { type: edge-filter-lens, filter: (id, elementType) !(elementType edge id edge-100), }, ],源码在 getFilterData 中先用filter对model.getData()返回的 nodes / edges / combos 分别过滤再在此基础上计算聚焦元素。style圆形透镜样式style控制透镜圆形本身的样式可用的样式属性如下属性描述类型默认值fill填充颜色string | Pattern | null#fffstroke描边颜色string | Pattern | null#000opacity整体透明度number | string1fillOpacity填充透明度number | string0.8strokeOpacity描边透明度number | string-lineWidth线宽度number | string2lineCap线段端点样式butt|round|square-lineJoin线段连接处样式miter|round|bevel-shadowColor阴影颜色string-shadowBlur阴影模糊程度number-shadowOffsetX阴影 X 方向偏移number-shadowOffsetY阴影 Y 方向偏移number-源码中的 defaultLensStyle 提供了基准样式白色填充、黑色描边、透明度 0.8zIndex: -Infinity保证透镜位于底层defaultOptions.style额外补充了lineWidth: 2最终通过Object.assign({}, defaultLensStyle, options.style)合并。nodeStyle / edgeStyle透镜内元素样式透镜内的节点和边是原始元素的克隆副本可以通过nodeStyle/edgeStyle单独定制从而在聚焦时放大节点、高亮描边、显示标签等。两者均支持静态对象或函数形式函数接收元素数据datum返回样式对象源码通过 getElementStyle 根据元素类型分发private getElementStyle(elementType: ElementType, datum: ElementDatum) { const styler elementType node ? this.options.nodeStyle : this.options.edgeStyle; if (typeof styler function) return styler(datum); return styler; }完整示例从官方 demo 看实际用法官方示例 demo/basic.js 使用远程关系数据集relations.json构建了一张含大量边的关系图并启用了边过滤镜import { Graph } from antv/g6; fetch(https://assets.antv.antgroup.com/g6/relations.json) .then((res) res.json()) .then((data) { const graph new Graph({ container: container, data, autoFit: view, node: { style: { size: 16 }, palette: { field: (datum) Math.floor(datum.style?.y / 60), }, }, edge: { style: { label: false, labelText: (d) d.data.value?.toString(), stroke: #ccc, }, }, plugins: [ { key: edge-filter-lens, type: edge-filter-lens, }, ], }); graph.render(); });结合 API 文档的完整配置形态API 配置参考 中给出了包含全部可选参数含r、trigger、nodeType、minR、maxR、scaleRBy及三层样式的完整形态可作为生产环境的配置模板const graph new Graph({ // ...数据与元素配置 plugins: [ { type: edge-filter-lens, key: edge-filter-lens, r: 80, // 透镜半径 trigger: pointermove, // 触发方式 nodeType: both, // 边显示条件 minR: 50, // 最小半径 maxR: 150, // 最大半径 scaleRBy: wheel, // 缩放方式 style: { fill: #f0f5ff, fillOpacity: 0.4, stroke: #1d39c4, strokeOpacity: 0.8, lineWidth: 1.5, }, nodeStyle: { size: 35, fill: #d6e4ff, stroke: #2f54eb, lineWidth: 2, labelFontSize: 14, labelFontWeight: bold, labelFill: #1d39c4, }, edgeStyle: { stroke: #1d39c4, lineWidth: 2, strokeOpacity: 0.8, }, }, ], });自定义透镜与聚焦元素样式以下示例演示如何自定义透镜外观以及透镜内节点/边的展示效果源自 官方手册 的自定义样式一节const graph new Graph({ plugins: [ { type: edge-filter-lens, r: 80, style: { fill: #f0f5ff, // 透镜区域的填充颜色 fillOpacity: 0.6, // 填充区域的透明度 stroke: #7e3feb, // 透镜边框改为紫色 strokeOpacity: 0.8, // 边框的透明度 lineWidth: 1.5, // 边框的线宽 }, nodeStyle: { size: 24, // 放大节点 fill: #7e3feb, // 紫色填充 stroke: #5719c9, // 深紫色描边 lineWidth: 1, // 细边框 label: true, // 显示标签 labelFill: #ffffff, // 白色文字 labelFontSize: 14, // 放大文字 labelFontWeight: bold, // 文字加粗 }, edgeStyle: { stroke: #8b9baf, // 灰色边 lineWidth: 2, // 加粗边线 label: true, // 显示标签 labelFill: #5719c9, // 深紫色文字 opacity: 0.8, // 适当的透明度 }, }, ], });动态更新插件配置updatePlugin边过滤镜的参数可以在运行时通过graph.updatePlugin动态修改无需重建图实例。官方 demo 中的控制面板dat.GUI演示了三种常用参数的实时切换graph.updatePlugin({ key: edge-filter-lens, trigger: click, // 可切换为 pointermove / click / drag }); graph.updatePlugin({ key: edge-filter-lens, scaleRBy: wheel, // 可切换为 wheel / unset }); graph.updatePlugin({ key: edge-filter-lens, nodeType: both, // 可切换为 source / target / both / either });修改style/nodeStyle/edgeStyle等嵌套对象时需要把整组对象传入graph.updatePlugin({ key: edge-filter-lens, nodeStyle: { size: 35, fill: #d6e4ff }, });源码中 update 方法 的实现是先unbindEvents()解绑旧事件再合并新选项this.r options.r ?? this.r保留未显式修改的半径最后bindEvents()按新 trigger/scaleRBy 重新绑定事件从而实现无缝热更新。destroy方法则会解绑事件并销毁透镜及所有克隆形状。源码视角透镜的渲染与回收机制从 EdgeFilterLens 类 可以梳理出插件运行的完整链路创建透镜首次触发时在transient图层new Circle({ style })并挂载之后通过lens.update({ x, y, size: r * 2 })移动与缩放计算聚焦元素getFocusElements以透镜中心为圆心、r为半径用distance(positionOf(datum), origin) r判定节点是否落入透镜再按nodeType过滤边克隆渲染renderFocusElements对聚焦的节点与边执行shape.cloneNode()生成克隆副本追加到 transient 图层并套用nodeStyle/edgeStyle同时用MapID, Element缓存克隆形状仅同步属性变化Object.entries(shape.attributes)逐项比对更新回收清理每一帧渲染后将不在聚焦集合内的克隆形状destroy()并从缓存中移除避免内存泄漏。这一克隆叠加的设计使得原始元素本身不被修改透镜移开后画布立即恢复原状非常适合在静态布局图、时序关系图等场景中做即席探查。该插件与其他插件的组合方式可参考 插件总览 与 扩展机制说明。小结边过滤镜通过透镜内克隆叠加、透镜外物理遮盖的机制为复杂网络提供了一种低成本的局部聚焦方案。配置上只需关注四个关键决策点trigger如何移动、r / minR / maxR透镜范围、nodeType边显示条件与nodeStyle / edgeStyle聚焦态样式。若需在运行中调整统一通过graph.updatePlugin({ key: edge-filter-lens, ... })完成。更多可运行示例与源码可继续查阅 示例入口 与 插件源码。赞分享数据可视化前端图表库【免费下载链接】G6♾ A Graph Visualization Framework in JavaScript.项目地址https://gitcode.com/gh_mirrors/g6/G6点击查看免费下载相关推荐Hermes WebUI Transparent Stream让 Agent 执行活动按时间线逐行呈现的显示模式实现Hermes WebUI Transparent Stream让 Agent 执行活动按时间线逐行呈现的显示模式实现 本文基于 Hermes WebUI 仓库数据可视化前端图表库G6 边过滤镜插件 EdgeFilterLens 完全指南配置、原理与实战G6 边过滤镜插件 EdgeFilterLens 完全指南配置、原理与实战 边过滤镜EdgeFilterLens是 G6 图形可视化框架内置的交互式探索插数据可视化前端图表库RemoveWindowsAI批量移除 Windows 11 Copilot 与 Recall 等 AI 功能的实操笔记RemoveWindowsAI批量移除 Windows 11 Copilot 与 Recall 等 AI 功能的实操笔记 Windows 11 从 25H2数据可视化前端图表库上一篇抖音视频批量下载器一键保存高清无水印内容的终极方案下一篇在Switch上畅享B站wiliwili第三方客户端完整安装指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
