` 的用法、源码原理与实战场景)
数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载导读本文围绕 Cytoscape.js 集合collection的shift()方法展开系统讲解如何以相对位移的方式移动图中节点的位置既支持一次沿x/y单方向平移也支持一次同时偏移两个维度还提供不触发渲染通知的静默变体silentShift()。读完本文你将掌握shift()与绝对定位position()的本质区别、与复合节点compound nodes联动的行为细节、批量位移的原子性保障并能通过测试用例与源码调用链理解其底层实现在拖拽微调、布局对齐、动画前处理等实际场景中正确选用 API。shift()是什么相对位移 vs 绝对定位在 Cytoscape.js 中节点在模型坐标系中的位置由position记录包含x与y两个数值字段参见 position.md。与之配套的移动手段有两种绝对定位eles.position()直接把位置设置为给定坐标相对位移eles.shift()在当前位置基础上加上一个位移向量实现整体平移。shift()的语义是把节点集合整体平移一个增量而不是把节点移动到某个坐标。这在需要保持元素之间相对几何关系不变的场景如整组元素平移、避开重叠、按帧步进动画中比绝对定位更直观、更安全。基本用法与两种调用签名shift()支持两种等价调用方式类型签名见 index.d.ts1. 对象形式同时偏移一个或两个维度// 同时沿 x 与 y 各平移 10 / 20 个模型坐标单位 cy.$(#j).shift({ x: 10, y: 20 }); // 只平移 x 方向y 保持不变 cy.$(#n1).shift({ x: 100 });2. 参数形式按维度名 数值// 单维度 cy.$(#j).shift(x, 10); cy.$(#j).shift(y, 20); // 依次调用可等价实现二维平移 cy.$(#n1).shift(x, 100); cy.$(#n1).shift(y, 200);从 源码实现 可以看到参数归一化逻辑对象形式会把未提供的维度补 0x: is.number(dim.x) ? dim.x : 0字符串数值形式则构造{ x: 0, y: 0 }后只给指定维度赋值。因此未指定的维度一定不会被改动——这正是测试用例 collection-position-and-dimensions.mjs 中断言shift({ x: 100 })后position().y保持不变的底层原因。返回值shift()返回调用它的集合自身因此支持链式调用cy.$(#j) .shift({ x: 10, y: 20 }) .shift(x, 5);与position()的关系增量从何而来shift()不是独立于position的另一套坐标体系它的内部实现是读取当前位置 → 计算新位置 → 调用position()写入let pos ele.position(); let newPos { x: pos.x delta.x, y: pos.y delta.y }; ele.position( newPos );因此shift()受到position()同样的约束最重要的两点是锁定节点不可移动被eles.lock()锁定的节点其position的canSet校验返回 false见 position.mjs对它执行shift()也不会产生位移复合节点会联动子节点position设置前的beforePositionSet钩子会检查元素是否为父节点若父节点发生非零位移则对ele.children()递归调用shift()同步平移见 position.mjs。复合节点场景下的特殊行为对包含复合节点的图执行shift()时源码做了显式防御// exclude any node that is a descendant of the calling collection if (cy.hasCompoundNodes() ele.isChild() ele.ancestors().anySame(this)) { continue; }即当调用集合中已经包含某个父节点时属于该父节点后代的子节点会被跳过避免重复平移父节点移动时子节点已被联动再单独平移一次就会产生双倍位移。这是从 position.mjs 的源码结构可以直接看出的行为在使用shift()移动整个复合节点子树时务必留意直接对父节点调用一次即可无需再手动遍历所有子孙节点。静默位移silentShift()shift()的第三个可选参数silent用于控制是否触发渲染通知。显式传入true或直接使用封装的silentShift()见 position.mjs位移过程将调用silentPosition()// 两种等价写法 cy.$(#j).shift({ x: 10, y: 20 }, true); cy.$(#j).silentShift({ x: 10, y: 20 });与silentPosition一样静默模式仍然会写入位置数据并更新缓存但不向渲染器发出通知allowBinding: false、不触发emitAndNotify见 position.mjs。适用场景包括批量执行位移后统一重绘先静默移动所有元素再手动触发一次重绘避免逐元素触发渲染造成性能浪费布局算法在计算中间态时移动元素最终一次性呈现结果。需要提醒的是静默位移不会自动刷新视图若后续没有其他事件触发重绘画面可能不会立即反映位置变化使用时需要自行安排渲染时机。批量位移的原子性批处理机制当集合包含多个元素时shift()会用cy.startBatch()/cy.endBatch()包裹整个循环见 position.mjs。批处理会把这一批元素的位置变更视为一个逻辑整体只触发一次或合并后的渲染通知与样式重算内部事件如position事件在批处理范围内被缓存结束后统一发出。这意味着对上百个节点执行shift()也不会逐个触发重绘性能上有保障同时批内位移是原子的不存在前半批已生效、后半批未生效的中间状态适合把shift()用在拖拽整组节点、多节点对齐等需要一致性的操作中。实战场景示例场景一节点微调与碰撞避让// 用户按住方向键微调选中节点每次平移 5 个模型单位 cy.on(keydown, (evt) { const delta { x: 0, y: 0 }; switch (evt.originalEvent.key) { case ArrowLeft: delta.x -5; break; case ArrowRight: delta.x 5; break; case ArrowUp: delta.y -5; break; case ArrowDown: delta.y 5; break; default: return; } cy.$(:selected).shift(delta); });场景二整组平移以腾出画布空间// 把左侧一整组节点向右平移避免与新增子图重叠 cy.$(.left-cluster).shift({ x: 120 });场景三手动布局微调后合并重绘const eles cy.nodes().filter(:parent); cy.startBatch(); eles.forEach((parent, i) parent.shift({ x: i * 30 }, true)); cy.endBatch();小结shift()提供相对位移语义与绝对定位position()互补适合保持元素间几何关系不变的平移操作支持对象与维度数值两种调用签名未指定的维度保持原值内部通过读位置 → 加增量 → 写位置实现遵守锁定约束并联动复合节点子树跳过后代节点的逻辑避免了重复位移silentShift()/ 第三参数silent可在不触发渲染通知的前提下完成批量位移集合级调用使用批处理包裹位移具有原子性且避免逐元素重绘的性能开销。进一步阅读位移相关的类型定义见 index.d.ts完整实现见 position.mjs行为验证见 collection-position-and-dimensions.mjs。赞分享数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载相关推荐three.js TSL 详解AssignNode 赋值节点的源码原理与实战用法three.js TSL 详解AssignNode 赋值节点的源码原理与实战用法 本文围绕 three.js 的 AssignNode API 文档展开系统前端3D渲染图形学TiXL 场Field变换节点 Translate 深度解析3D 空间位移原理与实战用法TiXL 场Field变换节点 Translate 深度解析3D 空间位移原理与实战用法 TiXL 的 Translate 是 Lib.field.spa音视频图形学桌面应用如何获取内购商品与价格信息flutter_inapp_purchase商品查询fetchProducts完全教程如何获取内购商品与价格信息flutter_inapp_purchase商品查询fetchProducts完全教程 flutter_inapp_purchase数据可视化上一篇Firebase iOS SDK安装与配置完全指南下一篇如何构建Hey社交应用的高效数据架构主从复制与读写分离完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Cytoscape.js 节点位移 API 详解：`eles.shift()` 的用法、源码原理与实战场景
数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载导读本文围绕 Cytoscape.js 集合collection的shift()方法展开系统讲解如何以相对位移的方式移动图中节点的位置既支持一次沿x/y单方向平移也支持一次同时偏移两个维度还提供不触发渲染通知的静默变体silentShift()。读完本文你将掌握shift()与绝对定位position()的本质区别、与复合节点compound nodes联动的行为细节、批量位移的原子性保障并能通过测试用例与源码调用链理解其底层实现在拖拽微调、布局对齐、动画前处理等实际场景中正确选用 API。shift()是什么相对位移 vs 绝对定位在 Cytoscape.js 中节点在模型坐标系中的位置由position记录包含x与y两个数值字段参见 position.md。与之配套的移动手段有两种绝对定位eles.position()直接把位置设置为给定坐标相对位移eles.shift()在当前位置基础上加上一个位移向量实现整体平移。shift()的语义是把节点集合整体平移一个增量而不是把节点移动到某个坐标。这在需要保持元素之间相对几何关系不变的场景如整组元素平移、避开重叠、按帧步进动画中比绝对定位更直观、更安全。基本用法与两种调用签名shift()支持两种等价调用方式类型签名见 index.d.ts1. 对象形式同时偏移一个或两个维度// 同时沿 x 与 y 各平移 10 / 20 个模型坐标单位 cy.$(#j).shift({ x: 10, y: 20 }); // 只平移 x 方向y 保持不变 cy.$(#n1).shift({ x: 100 });2. 参数形式按维度名 数值// 单维度 cy.$(#j).shift(x, 10); cy.$(#j).shift(y, 20); // 依次调用可等价实现二维平移 cy.$(#n1).shift(x, 100); cy.$(#n1).shift(y, 200);从 源码实现 可以看到参数归一化逻辑对象形式会把未提供的维度补 0x: is.number(dim.x) ? dim.x : 0字符串数值形式则构造{ x: 0, y: 0 }后只给指定维度赋值。因此未指定的维度一定不会被改动——这正是测试用例 collection-position-and-dimensions.mjs 中断言shift({ x: 100 })后position().y保持不变的底层原因。返回值shift()返回调用它的集合自身因此支持链式调用cy.$(#j) .shift({ x: 10, y: 20 }) .shift(x, 5);与position()的关系增量从何而来shift()不是独立于position的另一套坐标体系它的内部实现是读取当前位置 → 计算新位置 → 调用position()写入let pos ele.position(); let newPos { x: pos.x delta.x, y: pos.y delta.y }; ele.position( newPos );因此shift()受到position()同样的约束最重要的两点是锁定节点不可移动被eles.lock()锁定的节点其position的canSet校验返回 false见 position.mjs对它执行shift()也不会产生位移复合节点会联动子节点position设置前的beforePositionSet钩子会检查元素是否为父节点若父节点发生非零位移则对ele.children()递归调用shift()同步平移见 position.mjs。复合节点场景下的特殊行为对包含复合节点的图执行shift()时源码做了显式防御// exclude any node that is a descendant of the calling collection if (cy.hasCompoundNodes() ele.isChild() ele.ancestors().anySame(this)) { continue; }即当调用集合中已经包含某个父节点时属于该父节点后代的子节点会被跳过避免重复平移父节点移动时子节点已被联动再单独平移一次就会产生双倍位移。这是从 position.mjs 的源码结构可以直接看出的行为在使用shift()移动整个复合节点子树时务必留意直接对父节点调用一次即可无需再手动遍历所有子孙节点。静默位移silentShift()shift()的第三个可选参数silent用于控制是否触发渲染通知。显式传入true或直接使用封装的silentShift()见 position.mjs位移过程将调用silentPosition()// 两种等价写法 cy.$(#j).shift({ x: 10, y: 20 }, true); cy.$(#j).silentShift({ x: 10, y: 20 });与silentPosition一样静默模式仍然会写入位置数据并更新缓存但不向渲染器发出通知allowBinding: false、不触发emitAndNotify见 position.mjs。适用场景包括批量执行位移后统一重绘先静默移动所有元素再手动触发一次重绘避免逐元素触发渲染造成性能浪费布局算法在计算中间态时移动元素最终一次性呈现结果。需要提醒的是静默位移不会自动刷新视图若后续没有其他事件触发重绘画面可能不会立即反映位置变化使用时需要自行安排渲染时机。批量位移的原子性批处理机制当集合包含多个元素时shift()会用cy.startBatch()/cy.endBatch()包裹整个循环见 position.mjs。批处理会把这一批元素的位置变更视为一个逻辑整体只触发一次或合并后的渲染通知与样式重算内部事件如position事件在批处理范围内被缓存结束后统一发出。这意味着对上百个节点执行shift()也不会逐个触发重绘性能上有保障同时批内位移是原子的不存在前半批已生效、后半批未生效的中间状态适合把shift()用在拖拽整组节点、多节点对齐等需要一致性的操作中。实战场景示例场景一节点微调与碰撞避让// 用户按住方向键微调选中节点每次平移 5 个模型单位 cy.on(keydown, (evt) { const delta { x: 0, y: 0 }; switch (evt.originalEvent.key) { case ArrowLeft: delta.x -5; break; case ArrowRight: delta.x 5; break; case ArrowUp: delta.y -5; break; case ArrowDown: delta.y 5; break; default: return; } cy.$(:selected).shift(delta); });场景二整组平移以腾出画布空间// 把左侧一整组节点向右平移避免与新增子图重叠 cy.$(.left-cluster).shift({ x: 120 });场景三手动布局微调后合并重绘const eles cy.nodes().filter(:parent); cy.startBatch(); eles.forEach((parent, i) parent.shift({ x: i * 30 }, true)); cy.endBatch();小结shift()提供相对位移语义与绝对定位position()互补适合保持元素间几何关系不变的平移操作支持对象与维度数值两种调用签名未指定的维度保持原值内部通过读位置 → 加增量 → 写位置实现遵守锁定约束并联动复合节点子树跳过后代节点的逻辑避免了重复位移silentShift()/ 第三参数silent可在不触发渲染通知的前提下完成批量位移集合级调用使用批处理包裹位移具有原子性且避免逐元素重绘的性能开销。进一步阅读位移相关的类型定义见 index.d.ts完整实现见 position.mjs行为验证见 collection-position-and-dimensions.mjs。赞分享数据可视化【免费下载链接】cytoscape.jsGraph theory (network) library for visualisation and analysis项目地址https://gitcode.com/gh_mirrors/cy/cytoscape.js点击查看免费下载相关推荐three.js TSL 详解AssignNode 赋值节点的源码原理与实战用法three.js TSL 详解AssignNode 赋值节点的源码原理与实战用法 本文围绕 three.js 的 AssignNode API 文档展开系统前端3D渲染图形学TiXL 场Field变换节点 Translate 深度解析3D 空间位移原理与实战用法TiXL 场Field变换节点 Translate 深度解析3D 空间位移原理与实战用法 TiXL 的 Translate 是 Lib.field.spa音视频图形学桌面应用如何获取内购商品与价格信息flutter_inapp_purchase商品查询fetchProducts完全教程如何获取内购商品与价格信息flutter_inapp_purchase商品查询fetchProducts完全教程 flutter_inapp_purchase数据可视化上一篇Firebase iOS SDK安装与配置完全指南下一篇如何构建Hey社交应用的高效数据架构主从复制与读写分离完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考