数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载导读本文基于 cytoscape.js 官方文档中关于 core 级remove方法的说明系统讲解如何从图中移除节点与边包括「按元素、按集合、按选择器」三种调用方式移除节点时自动级联删除其相连边与复合子节点的联动规则以及删除不等于销毁——被移除元素仍驻留内存、可被eles.restore()恢复的底层机制。读完本文你将掌握在数据可视化与图分析场景中安全、高效地增删元素并能依据源码理解remove的完整内部流程。一、cy.remove()是什么cy.remove()是 cytoscape.js core 级别即图实例cy上的元素移除方法与集合级别的eles.remove()见 documentation/md/collection/remove.md功能一致区别仅在于调用入口不同core 版本的参数既可以是元素/集合也可以是选择器字符串而集合版本直接对调用者自身生效。官方文档 documentation/md/core/remove.md 给出的完整示例移除单个元素var j cy.$(#j); cy.remove( j );移除一个集合collectionvar collection cy.elements(node[weight 50]); cy.remove( collection );移除匹配选择器的元素cy.remove(node[weight 50]); // remove nodes with weight greater than 50从源码 src/core/add-remove.mjs 可以看到core 层对参数做了三类归一化处理remove: function( collection ){ if( is.elementOrCollection( collection ) ){ // already have right ref } else if( is.string( collection ) ){ let selector collection; collection this.$( selector ); } return collection.remove(); }传入元素或集合时直接使用引用传入字符串时按选择器查询出匹配集合最终统一调用集合的remove()方法并返回被移除元素构成的集合因此支持链式调用。三种调用形式等价于cy.$(#j).remove(); // 等价形式 1集合方法 cy.remove(node[weight 50]); // 核心方法 选择器 cy.elements().filter(ele ele.data(weight) 50).remove(); // 先过滤再移除二、核心注意点移除节点必然连带移除其相连边文档中特别强调important-indicator高亮提示移除一个节点node时必然同时移除与该节点相连的所有边edge。这是图的拓扑一致性约束一条边依赖其 source 与 target 两个端点若节点消失而边残留图结构将处于非法状态。因此无论你移除的是一个节点、多个节点还是通过选择器命中的一批节点cytoscape.js 都会自动把它们的相连边一并移除。例如// 移除单个节点它连接的所有边也会被自动清除 cy.remove( cy.$(#n1) );结合测试 test/core-graph-manipulation.mjs 中的断言可见移除#n1后expect( cy.nodes() ).to.have.length(2); // 只剩 n2、n3 expect( cy.$(#n1) ).to.have.length(0); // 节点已不可查询 expect( n1.removed() ).to.be.true; // 节点处于 removed 状态同时文档 documentation/md/core/remove.md 提醒虽然这些元素已从图中移除它们仍存在于内存中但几乎所有图操作函数都无法再作用于被移除的元素。三、删除 ≠ 销毁removed 状态与内存驻留3.1 元素的limbo中间状态remove并不执行 JavaScript 层面的销毁没有delete、没有释放对象而是将元素标记为removed状态。官方文档明确指出被移除的元素之所以存在仅仅是为了让你能把它恢复到原始 core 实例或一个新的实例。这一点与集合文档 documentation/md/collection/remove.md 中的描述相互印证被移除元素存在于一个中间状态limbo state以便之后把它重新加回某个 core 实例。eles.restore()见 documentation/md/collection/restore.md是唯一对该状态元素有意义的核心操作。3.2 为什么大多数函数会失效文档给出了一个典型反例对被移除元素调用eles.neighborhood()会失败——一个脱离了图上下文无端点、无边连接关系的元素无法定义邻域概念。从源码 src/collection/index.mjs 可以看到状态判定逻辑elesfn.removed function(){ let ele this[0]; return ele ele._private.removed; }; elesfn.inside function(){ let ele this[0]; return ele !ele._private.removed; };ele.removed()元素是否处于已移除状态ele.inside()元素是否仍在图中即未移除。被移除的元素同时会被移出 core 的元素池pool因此cy.$(#n1)、cy.getElementById(n1)均无法再查询到它测试中expect( cy.$(#n1) ).to.have.length(0)即验证此行为。四、源码级原理remove 的完整内部流程集合层的核心实现位于 src/collection/index.mjs 的elesfn.remove( notifyRenderer true, removeFromPool true )其流程可概括为四步4.1 第一步递归收集待移除元素级联规则remove通过内部add()辅助函数进行递归收集其中定义了三条关键级联规则function addConnectedEdges( node ){ // 收集节点的所有相连边 let edges node._private.edges; for( let i 0; i edges.length; i ){ add( edges[ i ] ); } } function addChildren( node ){ // 收集复合节点的所有子节点 let children node._private.children; for( let i 0; i children.length; i ){ add( children[ i ] ); } }收集时使用elesToRemoveIds做 id 去重避免重复移除。顺序上有意安排为边先出unshift 到数组头部、节点后移除push 到数组尾部从而保证先解除边的引用关系再处理节点。这一机制同时处理了两种联动节点 → 相连边文档强调的移除节点必移除其边即在此实现父节点 → 子节点复合图移除复合父节点会连带移除其全部后代子节点addChildren递归调用。4.2 第二步从核心元素池移除if( removeFromPool ){ cy.removeFromPool( elesToRemove ); // remove from core pool }core 层的 src/core/index.mjs 实现为removeFromPool: function( eles ){ this._private.elements.unmerge( eles ); return this; }从图实例维护的全量元素集合中摘除这些元素随后逐个将其_private.removed置为true并完成引用清理边的清理从 source/target 节点的_private.edges数组中移除自身引用并清空相关节点的遍历缓存traversal cache与平行边缓存复合节点的清理从父节点的_private.children中移除自身引用将_private.parent置空并记录alteredParents以便稍后更新父节点样式复合图标志维护移除后重新扫描剩余元素若已无父节点isParent()为 true 的元素则把cy._private.hasCompoundNodes置为 false。4.3 第三步触发 remove 事件并通知渲染器if( notifyRenderer ){ removedElements.emitAndNotify(remove); }被移除的集合会触发remove事件emitAndNotify同时通知渲染器重绘。因此你可以在应用层监听该事件实现数据联动、日志统计或撤销记录cy.on(remove, node, function( evt ){ console.log(node removed:, evt.target.id()); });测试 test/core-graph-manipulation.mjs 也验证了cy.json()变更元素数据时会同步触发remove事件cy.on(remove, function(){ cb; })。4.4 第四步返回被移除的集合let removedElements new Collection( this.cy(), elesToRemove ); ... return removedElements;返回值是已移除元素构成的新集合可用于后续处理例如统一调用restore()批量恢复。4.5 参数notifyRenderer与removeFromPoolremove的两个可选参数允许精细控制行为notifyRenderer默认true是否触发渲染更新与事件removeFromPool默认true是否真正移出元素池。当removeFromPool false时元素仅清理引用关系而不标记为 removed这正是eles.move()在 src/collection/index.mjs 中先 remove 清理、再 restore 重建重定位操作的实现基础——通过remove( notifyRenderer false, modifyPool false )复用清理逻辑而不产生图形变更事件。五、恢复被移除的元素eles.restore()被移除的元素唯一有意义的操作是eles.restore()它把元素从 limbo 状态重新放回图中var n1 cy.$(#n1); n1.remove(); n1.restore(); // 恢复到原 core 实例 cy.$(#n1); // 重新可查询测试 test/core-graph-manipulation.mjs 完整验证了这一往返过程n1.remove(); expect( n1.removed() ).to.be.true; expect( cy.$(#n1) ).to.have.length(0); n1.restore(); expect( n1.removed() ).to.be.false; expect( cy.$(#n1) ).to.have.length(1); expect( n1.degree() ).to.equal(0); // 注意恢复后不再自动带边重要细节恢复节点时原先被联动删除的边不会自动恢复因为 remove 时已将这些边的引用一并清理。若需连同边一起恢复应在移除前保留包含边在内的完整集合引用例如var nodesToRemove cy.$(#n1); var alsoEdges nodesToRemove.connectedEdges(); // 先记录相连边 cy.remove( nodesToRemove ); // 需要时 alsoEdges.merge( nodesToRemove ).restore(); // 一起恢复5.1 与cy.add()的配合core 层的add见 src/core/add-remove.mjs对同一实例传入已移除元素时实际走的是恢复路径if( eles._private.cy cy ){ // same instance just restore elements eles.restore(); } else { // otherwise, copy from json // 跨实例时通过 json() 序列化复制元素数据 }因此同实例cy.add(removedEle)等价于removedEle.restore()直接恢复引用跨实例cy.add(其它实例移除的元素)会通过ele.json()深拷贝数据生成新元素从而把元素迁移到新图中。测试 test/core-graph-manipulation.mjs 中的 adds via collection 用例即演示了先cy.$(edge).remove()再cy.add(edges)的完整往返。六、实践建议与易错点总结场景推荐写法说明移除单个元素cy.remove(cy.$(#j))或cy.$(#j).remove()等价按条件批量移除cy.remove(node[weight 50])选择器字符串最简洁移除选中元素cy.$(:selected).remove()集合文档标准示例移除后恢复保存引用之后调用restore()恢复后原边不会自动回来跨实例迁移otherCy.add(thisCy 移除的元素)走 JSON 拷贝路径易错点不要对被移除元素调用图遍历/算法函数如neighborhood()、degree()应通过ele.inside()先判断元素是否仍在图中恢复节点不会恢复边如需边请事先用connectedEdges()保存引用移除复合父节点会级联移除其所有子节点与后代请确认该行为符合预期remove返回的是被移除元素的集合可借此实现批量恢复或批量记录。七、延伸阅读官方 core 级文档documentation/md/core/remove.md本文主体依据集合级文档等价方法documentation/md/collection/remove.md恢复方法文档documentation/md/collection/restore.md添加元素文档含恢复逻辑documentation/md/core/add.md核心源码core 层分发 src/core/add-remove.mjs、集合层实现 src/collection/index.mjs、元素池管理 src/core/index.mjs测试用例行为契约test/core-graph-manipulation.mjs赞分享数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载相关推荐cytoscape.js 集合原地移除元素eles.unmerge() 方法与源码级原理详解cytoscape.js 集合原地移除元素eles.unmerge 方法与源码级原理详解 eles.unmerge 是 cytoscape.js 中用于 原地数据可视化Cytoscape.js 元素移除指南eles.remove() 的图操作语义与 restore 恢复机制Cytoscape.js 元素移除指南eles.remove 的图操作语义与 restore 恢复机制 本指南讲解 Cytoscape.js 中 eles.r数据可视化Cytoscape.js 元素类移除指南removeClass() 的用法、源码原理与性能优化Cytoscape.js 元素类移除指南removeClass 的用法、源码原理与性能优化 导读 eles.removeClass 是 Cytoscape.j数据可视化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考