 用法与选中状态机制深度解析)
数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载eles.unselect()是 Cytoscape.js 中用于将集合内所有元素置为“未选中”状态的核心方法广泛应用于工具栏“取消全选”、交互事件回调中清除选中态、以及多选之后的高亮复位等场景。本文以官方文档 unselect.md 为主体结合源码实现与测试用例完整讲解unselect()的用法、底层状态机、事件触发机制以及它与select()、unselectify()、autounselectify等选中相关 API 的协作关系读完后你将能熟练、安全地在图应用中管理与响应元素的选中状态。API 一览签名、返回值与别名unselect()是定义在集合collection原型上的方法作用于调用它的所有元素。其完整行为如下项目说明方法名eles.unselect()别名eles.deselect()作用对象调用集合中的每一个元素返回值原集合本身支持链式调用触发事件unselect仅对状态确实发生变化的元素触发官方示例cy.$(#j).unselect();官方文档 unselect.md 给出的示例十分简洁cy.$(#j).unselect();其中cy.$(#j)通过 ID 选择器取得元素集合随后调用unselect()将其从选中状态切换为未选中。由于方法返回集合本身可以继续链式调用其他集合方法例如// 取消所有节点的选中状态然后给它们添加高亮 class cy.nodes().unselect().addClass(dimmed);// 别名 deselect二者完全等价 cy.$(#j).deselect();从源码看别名在 src/collection/switch-functions.mjs 中直接以elesfn.deselect elesfn.unselect;的形式定义因此deselect与unselect没有任何行为差异。底层实现一次理解所有开关型方法unselect()并不是一个独立手写的函数而是通过 Cytoscape.js 的“开关函数工厂”switch function factory批量生成的。相关实现集中在 src/collection/switch-functions.mjsdefineSwitchSet( { field: selected, ableField: selectable, overrideAble: function( ele ){ return ele.cy().autounselectify() ? false : undefined; }, on: select, off: unselect } );这段声明可以拆解为以下要点状态字段field: selected表示该方法读写元素私有状态_private.selected。元素的初始化默认值定义在 src/collection/element.mjsselected默认falseselectable默认true未显式指定时。可操作前提ableField: selectable意味着只有selectable为true的元素才允许被选中/取消选中。对一个unselectify()过的元素调用unselect()不会产生任何效果。全局覆盖overrideAble检查核心的autounselectify开关——若该选项开启则所有元素的选中状态都不可变unselect()直接返回集合自身。事件配对on: select生成select()off: unselect生成unselect()二者共享同一个工厂函数defineSwitchFunction。工厂函数的核心逻辑src/collection/switch-functions.mjs为遍历集合中每个元素先判断able前提是否满足再判断当前值与目标值是否不同changed仅在“状态真的发生变化”时才把元素记入changedEles。循环结束后let changedColl this.spawn( changedEles ); changedColl.updateStyle(); // change of state possible change of style changedColl.emit( params.event );即对发生变化的元素重新计算样式因为选中状态可能影响样式例如默认样式的:selected规则并触发unselect事件。如果集合中没有任何元素的选中状态发生改变则不会触发任何事件——这一点在测试中有明确覆盖见下文。关键行为一幂等性对已经处于未选中状态的元素再次调用unselect()不会触发事件、也不会重新应用样式。测试 test/collection-selection.mjs 验证了这一点连续两次对同一元素调用unselect()其selected()始终保持false。关键行为二事件只在变化时触发it(fires the unselect event, function(){ var n1 cy.$(#n1).select(); ... n1.on(unselect, function(){ triggered true; }); n1.unselect(); expect( triggered ).to.be.true; });对应测试见 test/collection-selection.mjs。这保证了监听unselect事件的业务逻辑不会因冗余调用而重复执行。状态查询与相关 API 对照围绕“选中状态”Cytoscape.js 提供了一组成对的开关型 API全部由同一个工厂生成开关对应开启方法对应关闭方法状态字段是否被选中select()unselect()/deselect()selected是否可被选中selectify()unselectify()selectableeles.selected()查询集合第一个元素的选中状态返回布尔值与之配套的:selected/:unselected选择器可用于过滤例如cy.$(:selected)获取当前所有选中元素。相关文档见 select.md、is.md。eles.unselectify()将元素标记为不可选中此后select()/unselect()对它都不再生效直到调用selectify()恢复。相关文档见 unselectify.md 与 selectify.md。从源码src/collection/switch-functions.mjs可以看到这两组开关相互联动selectable状态本身就受autounselectify全局选项影响。测试 test/collection-selection.mjs 系统验证了这些交互n1.unselectify(); n1.select(); expect( n1.selected() ).to.be.false; // unselectify 后 select 无效 n2.select(); n2.unselectify(); n2.unselect(); expect( n2.selected() ).to.be.true; // unselectify 后 unselect 无效 n1.selectify(); // 恢复可选中性后 n1.unselect(); // unselect 重新生效 expect( n1.selected() ).to.be.false;全局选项autounselectify除了逐元素调用unselectify()还可以在初始化时设置核心选项autounselectify: true一次性冻结整个图的选中状态const cy cytoscape({ container: document.getElementById(cy), autounselectify: true, elements: [ /* ... */ ] });该选项在 src/core/index.mjs 中以默认值false初始化读取与设置方法cy.autounselectify( bool )定义于 src/core/viewport.mjs。开启后select()、unselect()、selectify()、unselectify()的overrideAble/overrideField钩子都会返回false从而彻底屏蔽选中状态的变更适合展示型、只读型图场景。unselect 事件与交互场景unselect事件是官方事件体系的一部分完整事件列表见 events.md。程序化调用unselect()会触发unselect事件而用户交互引发的反选会触发带前缀的变体事件主要包括tapunselect点击空白区域或不可选元素时触发。在 src/extensions/renderer/base/load-listeners.mjs 中可以看到点击空白处时渲染器执行cy.$(isSelected).unselect([tapunselect])——这里第二个数组参数是工厂函数支持的“附加事件”扩展用法即状态变更后除unselect外额外触发tapunselect。boxselect/boxunselect框选交互拖拽矩形选择相关见 src/extensions/renderer/base/load-listeners.mjs 中的cy.$(:selected).unselect([tapunselect])等调用。监听示例cy.on(unselect, node, function(evt){ console.log(节点被取消选中, evt.target.id()); }); cy.on(tapunselect, function(){ console.log(点击空白处所有选中元素被反选); });需要特别说明unselect()的第二个参数可以传入附加事件名数组但这一用法主要在渲染器内部使用业务代码中建议只依赖标准的unselect事件避免与用户交互事件混淆。常见应用场景场景一清除全部选中状态cy.nodes().unselect(); // 取消所有节点的选中 cy.elements().unselect(); // 取消所有元素节点 边的选中场景二切换选中状态配合selected()与select()实现单选/多选切换逻辑const node cy.$(#a); if( node.selected() ){ node.unselect(); } else { node.select(); }场景三先反选再做其他操作链式调用cy.$(:selected).unselect().removeClass(highlight);场景四基于自定义事件实现“取消全部选中”按钮cy.on(clear-selection, function(){ cy.elements().unselect(); }); // 触发 cy.emit(clear-selection);测试验证行为边界一览除上文已引用的用例外test/collection-selection.mjs 完整覆盖了unselect()的核心行为契约可作为实现事实的最终依据选中后调用unselect()selected()返回falseL63-L70对已未选中的元素重复调用状态保持false且无副作用L72-L79状态真正变化时触发unselect事件L81-L95unselectify()使选中状态不可变selectify()恢复可变性L99-L126。此外test/selectors.mjs 还验证了:unselected、:unselectable选择器与反选/不可选状态的对应关系说明unselect()变更的状态会即时反映在选择器查询结果中。总结与进一步阅读unselect()虽然只有一行示例但背后是一个完整、严谨的状态管理机制开关函数工厂统一生成、selectable与autounselectify双层门槛控制、状态变化才触发事件的幂等设计以及与选择器、样式、事件体系的无缝衔接。理解这一机制是正确实现复杂交互多选、框选、工具栏操作的前提。可以继续深入阅读的相关文档与源码方法文档select.md、unselectify.md、selectify.md、is.md事件文档events.md选择器文档selectors.md核心实现src/collection/switch-functions.mjs、src/collection/element.mjs交互触发源码src/extensions/renderer/base/load-listeners.mjs行为测试test/collection-selection.mjs赞分享数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载相关推荐Cytoscape.js 元素状态控制unselectify() 让元素不可选的原理与实战指南Cytoscape.js 元素状态控制 unselectify 让元素不可选的原理与实战指南 导读 在 Cytoscape.js 中元素的选中select数据可视化Cytoscape.js 元素选中控制select() 方法完整指南Cytoscape.js 元素选中控制select 方法完整指南 本篇指南以 Cytoscape.js 集合collectionAPI 中的 select数据可视化Cytoscape.js 元素集合 is() 方法深度解析基于选择器的存在性判定与匹配原理Cytoscape.js 元素集合 is 方法深度解析基于选择器的存在性判定与匹配原理 在 Cytoscape.js 中 eles.is selector数据可视化创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
