Cytoscape.js 集合邻域 API 详解：neighborhood、openNeighborhood 与 closedNeighborhood 的图遍历实战

数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载导读eles.neighborhood()是 Cytoscape.js 图遍历体系中用于获取一跳邻域的核心方法与图论教材中传统的邻域neighbourhood定义不同它返回的集合同时包含邻居节点与连接边从而为可视化高亮、图算法实现提供了更大灵活性。本文将基于documentation/md/collection/neighborhood.md的官方说明结合源码实现与测试用例完整讲解 open / closed 邻域的语义差异、selector 过滤用法、底层遍历算法及其在路径搜索、中心性计算和自动布局中的真实应用。一、什么是邻域与图论传统定义的差异在标准图论中一个节点 $v$ 的邻域通常指与 $v$ 直接相邻的节点集合即一阶邻居。Cytoscape.js 的neighborhood()在此基础上做了实用化扩展——官方文档明确指出The neighbourhood returned by this function is a bit different than the traditional definition of a neighbourhood: This returned neighbourhood includes the edges connecting the collection to the neighbourhood. This gives you more flexibility.也就是说neighborhood()的返回值是元素集合可能同时包含节点与边其组成为与原集合中每个节点直接相连的边connectedEdges通过这些边连接到的另一端节点距原集合一跳的邻居节点。这一设计的好处是拿到结果后你可以直接对邻居关系整体做样式操作如高亮边与节点而无需再单独查询边。它对节点集合、边集合以及混合集合都适用对边调用时结果等价于对边的两个端点节点分别求邻域后的并集。二、开放邻域与闭合邻域open vs closed官方文档给出了两种邻域的明确定义开放邻域open neighbourhood不包含原始元素集合本身。当你不指定参数时默认返回的就是开放邻域。闭合邻域closed neighbourhood包含原始元素集合本身即open结果与原始集合的并集。对应到 API 上方法是否包含原集合说明eles.neighborhood()否默认开放邻域等价于openNeighborhood()eles.openNeighborhood()否开放邻域的显式别名eles.closedNeighborhood()是闭合邻域等价于neighborhood().add(this)三个方法都接受一个可选的selector 字符串参数用于对结果进行二次过滤cy.$(#j).neighborhood(); // 获取节点 j 的开放邻域邻居节点 连接边 cy.$(#j).neighborhood(node); // 只保留邻域中的节点 cy.$(#j).neighborhood(edge); // 只保留邻域中的边 cy.$(#j).closedNeighborhood(); // 加上节点 j 本身 cy.$(#j).openNeighborhood(node); // 开放邻域 节点过滤关于 selector 的完整语法node、edge、#id、[dataAttr]、类选择器等可参阅 selectors.md。三、源码实现剖析一次遍历节点与边同时收集neighborhood()及相关方法定义在 src/collection/traversing.mjs 的 Neighbourhood functions 区块。其核心实现如下neighborhood: cache(function( selector ){ let elements []; let nodes this.nodes(); for( let i 0; i nodes.length; i ){ // for all nodes let node nodes[ i ]; let connectedEdges node.connectedEdges(); // for each connected edge, add the edge and the other node for( let j 0; j connectedEdges.length; j ){ let edge connectedEdges[ j ]; let src edge.source(); let tgt edge.target(); let otherNode node src ? tgt : src; // need check in case of loop if( otherNode.length 0 ){ elements.push( otherNode[0] ); // add node 1 hop away } // add connected edge elements.push( edge[0] ); } } return ( this.spawn( elements, true ) ).filter( selector ); }, neighborhood),从源码结构可以梳理出几个值得注意的实现细节以节点为遍历入口实现首先调用this.nodes()取出集合中的节点部分边的邻域最终也归约到其两端节点然后对每个节点调用node.connectedEdges()定义见同文件 src/collection/traversing.mjs内部直接读取节点私有数据node._private.edges因此效率很高。一跳邻居的判定对每条连接边通过edge.source()/edge.target()求出与当前节点相对的另一端节点并加入结果同时把该边本身也加入结果——这正是文档强调的包含连接边的邻域。自环loop防护当节点存在指向自身的自环时otherNode会退化为空集合代码中的if (otherNode.length 0)检查确保不会把空元素压入结果。结果去重与过滤this.spawn( elements, true )会把收集到的原始元素包装成去重的集合对象最后统一执行.filter( selector )因此无论是否传 selector返回的都是标准的 Cytoscape.js 集合支持链式调用。结果缓存neighborhood用cache(...)包装与outgoers、incomers、connectedEdges等遍历方法一样会缓存计算结果多次调用不会重复遍历缓存可通过eles.clearTraversalCache()清除见 src/collection/traversing.mjs。open / closed 与英式拼写别名闭合邻域并非独立实现而是对开放邻域结果做了一次并集closedNeighborhood: function( selector ){ return this.neighborhood().add( this ).filter( selector ); }, openNeighborhood: function( selector ){ return this.neighborhood( selector ); }此外源码为所有三个方法提供了英式拼写别名在编码时两种写法均可使用elesfn.neighbourhood elesfn.neighborhood; elesfn.closedNeighbourhood elesfn.closedNeighborhood; elesfn.openNeighbourhood elesfn.openNeighborhood;四、测试用例验证预期结果一目了然项目测试 test/collection-traversing.mjs 用一条由n1 — n1n2 — n2 — n2n3 — n3构成的简单路径验证了邻域语义it(eles.neighborhood() etc, function(){ var nbhd cy.$(#n2).neighborhood(); expect( nbhd.same( cy.$(#n1, #n3, #n1n2, #n2n3) ) ).to.be.true; expect( cy.$(#n1).neighborhood().same( cy.$(#n2, #n1n2) ) ).to.be.true; expect( cy.$(#n2).closedNeighborhood().same( cy.$(#n1, #n2, #n3, #n1n2, #n2n3) ) ).to.be.true; });对照测试可以直观验证前文语义#n2的开放邻域 邻居节点#n1、#n3加上连接边#n1n2、#n2n3共 4 个元素不含#n2自身#n1的开放邻域 #n2与边#n1n2#n2的闭合邻域 开放邻域 ∪#n2自身共 5 个元素。这与官方文档示例cy.$(#j).neighborhood()的行为完全一致可直接作为验证脚本运行。五、邻域在库内算法与布局中的真实调用neighborhood()及其变体不是孤立 API它被 Cytoscape.js 内部多个核心模块复用可以作为理解其价值的用户证据最短路径算法dijkstra.mjs 在松弛操作中通过u.neighborhood().intersect( nodes )获取节点u的邻居节点先求含边的邻域再与节点集求交集是邻域 集合运算组合的典型范式。中心性计算betweenness-centrality.mjs 用v.openNeighborhood().nodes()提取每个顶点的邻居节点集合作为 Brandes 算法的前置数据结构。自动布局breadthfirst.mjs 在广度优先分层时用ele.neighborhood()找出当前元素的邻居并继续扩散。集合比较器comparators.mjs 的allAreNeighbors(collection)方法内部直接调用this.neighborhood()判断目标集合是否全部落在当前集合的邻域内配套文档见 allAreNeighbors.md。六、与其他遍历 API 的关系与实战建议邻域函数属于单跳遍历族可与同文件中的其他方法按需组合方法作用文档neighborhood()一跳邻居节点 连接边本文档connectedEdges()与节点相连的所有边connectedEdges.mdconnectedNodes()边的两个端点节点connectedNodes.mdedgesWith() / edgesTo()两集合之间的边edgesWith.mdoutgoers() / incomers()有向图中的出邻 / 入邻outgoers.md实战中常用的组合模式包括// 高亮选中节点的邻域含边常用于以点带面的交互聚焦 cy.on(tap, node, function( evt ){ const node evt.target; cy.elements().removeClass(highlighted); // 先清除旧高亮 node.closedNeighborhood().addClass(highlighted); // 闭合邻域节点本身 邻居 边 }); // 仅统计一跳邻居节点数量不含边 const degree cy.$(#j).neighborhood(node).length; // 只取邻居节点用于后续集合运算如交集、差集 const neighborNodes cy.$(#j).openNeighborhood(node); const mutual neighborNodes.intersect( cy.$(#k).neighborhood(node) ); // 共同邻居七、注意事项与边界行为集合不可变性neighborhood()与 Cytoscape.js 其他集合方法一样返回新的集合而不会修改原集合集合不可变规则详见 collection.md因此可以安全地用于函数式链式编程。默认开放语义不传参数时是开放邻域需要连自己在内的场景务必使用closedNeighborhood()。自环与重边自环在结果中只会贡献边本身节点部分因去重被正确排除平行边会各自出现在结果集合中。selector 过滤发生在邻域计算之后因此neighborhood(node)与neighborhood().nodes()语义等价开发者可按可读性自行选择。有向图说明neighborhood()不区分边的方向返回无向意义上的一跳邻域需要方向感知时请改用outgoers()/incomers()。小结eles.neighborhood()以节点 连接边一体的返回结构区别于传统图论邻域配合openNeighborhood()、closedNeighborhood()与 selector 过滤可以在一行代码内完成交互高亮、度数统计、共同邻居计算等常见图操作而其底层实现src/collection/traversing.mjs与测试test/collection-traversing.mjs则完整印证了官方文档的描述并为 Dijkstra、介数中心性和 BFS 布局等库内算法提供了统一的一跳遍历原语。赞分享数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载相关推荐Cytoscape.js outgoers() 详解节点出边与后继集合的图遍历实战Cytoscape.js outgoers 详解节点出边与后继集合的图遍历实战 outgoers 是 Cytoscape.js 集合collection遍数据可视化cytoscape.js 集合遍历 API 详解使用 eles.sources() 高效获取边的源节点cytoscape.js 集合遍历 API 详解使用 eles.sources 高效获取边的源节点 本篇文章聚焦 cytoscape.js 图论可视化库中集合数据可视化如何获取内购商品与价格信息flutter_inapp_purchase商品查询fetchProducts完全教程如何获取内购商品与价格信息flutter_inapp_purchase商品查询fetchProducts完全教程 flutter_inapp_purchase数据可视化上一篇TSF生产环境部署监控、日志和安全配置的完整清单下一篇如何永久保存微信聊天记录从数字碎片到个人记忆库的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考