Question

我想在一个页面中按时间顺序显示几个cytoscape实例：首先在图表上显示一组节点，用户必须与它交互（创建边缘），然后他移动到第二个图形（#cy0是：隐藏，＃cy1是：可见）。

为了代码优化，我希望使用相同的初始化函数来显示不同的连续节点集。我的初始化函数在第一个实例中工作正常，但在第二个会话中未创建图形（cy.initrender（）== false）。可能缺少一个命令，我测试了一对，但我不知道该怎么做。

这是我的代码：

//元素

$(function(){ // on dom ready
var elesJson = {
nodes: [
  { data: { id: 'S', faveShape: 'rectangle',} }
   ...
  ],

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;});

// jQuery命令从一个实例移动到另一个实例。

$('#next').click(function(){
$("#cy"+indexLevel).css("visibility","hidden");
indexLevel++;
$("#cy"+indexLevel).css("visibility","visible");
cy.load(elesJson);
cy.ready(); 
console.log(cy.initrender());
});

我能够生成我的node.collection，它不是空的，但是没有在#cy div中创建和/或显示canvas元素，并且cy.initrender（）返回＆＃34; false＆＃34; 。

对此有何解决方案？

Answer 1

如初始文档中所述，如果您使用cy div cy.resize()或display：http://js.cytoscape.org/#core/initialisation

，则必须致电position

cy.resize()：http://js.cytoscape.org/#core/viewport-manipulation/cy.resize

修改：您可能希望使用z-index来简化操作...

Cytoscape：多个实例，没有图形显示

1 个答案: