Cytoscape Edgehandles:多个 cy 实例与 Ghost Edgehandles 混淆

Cytoscape Edgehandles: multiple cy instances messing with Ghost Edgehandles

本文关键字：Edgehandles Ghost 混淆 实例 cy 多个 Cytoscape      更新时间：2023-09-26

我想在单个页面中按时间顺序显示多个 cytoscape 实例：第一组节点显示在图形上，用户必须在它们之间创建边缘，然后移动到第二个图形，依此类推。

我的重新初始化代码和 cy.edge句柄之间似乎存在冲突。首先，一切正常。从第二个实例开始，拖动边缘时不会显示"重影"边缘。

我在控制台中收到以下错误消息：

jquery.cytoscape.js-edgehandles.js：333 uncatch TypeError： 不能 读取 null jquery.cytoScape.js-edgeHandles 的属性 'id'.js：333 $.fn.cytoscapeEdgehandles.functions.init.drawLine jquery.cytoscape.js-edgehandles.js：732 moveHandler jquery-2.0.3.min.js：5 x.event.dispatchjquery-2.0.3.min.js：5 x.event.add.y.handle

显示为"空"的变量是：

333：来源：sourceNode.id（），

这是我为重新初始化 cy.instance 编写的代码：

$('#next').click(function(){
indexLevel++;// index to move from one instance to the next. 
cy.load(elesJson);// load nodes collection
cy.ready(); 
});

这是我的代码：

//元素

$(function(){
var elesJson = { 
nodes: [{ data: { id: 'S'} }...],
edges: [{ data: { id: 'loan', source: 'B', target: 'U' } },...]};

实例索引 

var indexLevel=0;

Cy 初始化

$("#cy"+indexLevel).cytoscape({
style: cytoscape.stylesheet()...
elements: elesJson, 
ready: function(){window.cy = this;cy.zoomingEnabled( false );
    cy.panningEnabled( false );});

有什么解决方案吗？

我不是问题到底是什么，但我认为原因可能出在工作流程中。 它应该是：

（1） destroy() cy上的边缘手柄。

（2）cy.destroy()核心实例。

（3）创建一个新的核心实例，cy。

（4） 在cy上创建新的边缘手柄。

交替流：

（1）永不破坏。

（2）与其销毁，不如清空图形并重复使用它们：cy.elements().remove()

如果边缘句柄中存在错误，则替代流可能更安全，并且肯定更有效（即更快）。

如果

这不能解决问题，那么也许您可以共享一些代码（或者如果代码敏感，则私下发送给我），我们可以在此处发布通用结果。

相关文章：