Инициализация cytoscape

Question

Будучи новым для cytoscapeweb 2, я следую одному из представленных примеров, чтобы узнать, как использовать API. я не могу заставить его работать, и поджигатель сообщает следующее сообщение:

компонент возвращается код ошибки: 0x80004005 (NS_ERROR_FAILURE) вар п = this.nodesGroup.getBBox();

в моем HTML документе, cytoscapeweb ДИВ встраивается в закладке JQuery виджет (только для обеспечения контекста)

где-то в my.html

<div id="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Interactors Selection</a></li> 
     <li><a href="#tabs-2">Interactome Builder</a></li>  
    </ul> 
    <div id="tabs-1"> 
     <p>Tab 1 content</p> 
    </div> 
    <div id="tabs-2"> 
     <p>Tab 2 content</p> 
     <div id="cy"></div> 
    </div> 
</div> 

и в foo.js, тогда

function cytoscapeInit() { 
    alert ("intializing cytoscape"); 

    // create a mapper for node size 
    var nodeSizeMapper = { 
     continuousMapper: { 
      attr: { 
       name: "weight", 
       min: 0, 
       max: 100 
      }, 
      mapped: { 
       min: 15, 
       max: 30 
      } 
     } 
    }; 
// call cytoscape web on the `cy` div 
    $("#cy").cytoscapeweb({ 
           // define the elements in the graph 
    elements: { 
     nodes: [ 
      { data: { id: "a", weight: 43 }, classes: "foo" }, 
      { data: { id: "b", weight: 2 }, classes: "bar" }, 
      { data: { id: "c", weight: 88 }, classes: "foo bar" } 
     ], 

     edges: [ 
      { data: { id: "ab", source: "a", target: "b", weight: 32 }, classes: "foo" }, 
      { data: { id: "bc", source: "b", target: "c", weight: 12 }, classes: "bar baz" }, 
      { data: { id: "ca", source: "c", target: "a", weight: 96 }, classes: "baz foo" }, 
      { data: { id: "ac", source: "a", target: "c", weight: 65 }, classes: "bar" } 
     ] 
    }, 

    // define the layout to use 
    layout: { 
     name: "preset", 
     positions: { 
      "a": { x: 30, y: 30 }, 
      "b": { x: 125, y: 131 }, 
      "c": { x: 200, y: 50 } 
     }, 
     fit: false, 
     stop: function(){ 
      cy.reset(); 
      cy.center(); 
     } 
    }, 

    // define the visual style (like css) of the graph 
    style: { 
     selectors: { 
      "node":{ 
       shape: "ellipse", 
       fillColor: "#888", 
       height: nodeSizeMapper, 
       width: nodeSizeMapper, 
       labelText: { 
        passthroughMapper: "id" 
       } 
      }, 
      ".yay": { 
       fillColor: "red", 
       lineColor: "red", 
       targetArrowColor: "red" 
      }, 
      "edge": { 
       lineColor: "#ccc", 
       targetArrowColor: "#ccc", 
       width: { 
        continuousMapper: { 
         attr: { 
          name: "weight" 
         }, 
         mapped: { 
          min: 2, 
          max: 5 
         } 
        } 
       }, 
       targetArrowShape: "triangle" 
      }, 
      "node:selected": { 
       fillColor: "#333" 
      }, 
      "edge:selected":{ 
       lineColor: "#666", 
       targetArrowColor: "#666" 
      } 
     } 
    }, 

    // define the callback for when cytoscape web is ready 
    ready: function(cy){ 
     window.cy = cy; 
    } 
}); 

Я пропустил что-то очевидное?

Если да, приносим извинения.

Answer 1

(1) Не помещайте предупреждения в свой код, даже если вы тестируете. Он может разбить асинхронный код, например, инициализировать Cytoscape Web или выполнить вызов AJAX. Вместо этого используйте console.log().

(2) Возможно, вы скрываете Cytoscape Web div, cy, с вкладками. Вы не должны использовать display: none;, потому что окно просмотра Cytoscape Web будет 0x0 px. Попробуйте что-нибудь вроде position: absolute; left: -9999px; или аналогичный для скрытия. Это влечет за собой изменение любого имени класса, используемого jQuery для скрытых вкладок (возможно, .ui-state-hidden или что-то подобное).

(3) Я рассмотрю, как сделать код визуализации более терпимым к скрытым Cytoscape Web div.

Answer 2

У меня есть лучшее решение этой проблемы: Выполнение вкладки jquery сразу после загрузки всех графиков. http://cytoscape.github.io/cytoscape.js/#core/events/cy.ready

for(var t = 0, tot=pageList.length; t<tot; t++) //draw graph for all pages 
    {   
     var currPage = pageList[t]; 
     getData(currPage); 
    } 

    function getData(currPage) 
    { 
     //initiate graph, do stuff... 

     //graph ready 
     window[currPage + "Container"].ready(function(e) 
     {  
      if (currPage.indexOf(lastPage) != -1)//executetabsafterlastgraphisdrawn 
      { 
       setTabs();   
      } 
     }); 
    }