Cytoscape：多个实例且无图形显示答案

【问题标题】：Cytoscape : multiple instances and no graph displayCytoscape：多个实例且无图形显示
【发布时间】：2015-03-18 00:32:21
【问题描述】：

我想在一个页面中按时间顺序显示几个 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 中创建和/或显示，并且 cy.initrender() 返回“false”。

有什么解决办法吗？

【问题讨论】：

好吧，我找到了答案：在单个 #cy div 中加载连续的图表...

标签： cytoscape.js

【解决方案1】：

如 init 文档中所述，如果您使用 cy div 的 display 或 position，则必须调用 cy.resize()：http://js.cytoscape.org/#core/initialisation

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

编辑：您可能想使用z-index 来简化事情...

【讨论】：