초기화 cytoscape

Question

는 cytoscapeweb 2에 새로운 기능으로, API를 사용하는 방법을 배우려면 제공된 예제를 따르고 있습니다. 나는 그것이 작동되도록 못할와 불을 지르고 다음과 같은 메시지를보고 구성 요소가 오류 코드를 반환

: 0X80004005 (NS_ERROR_FAILURE) VAR N = this.nodesGroup.getBBox를(); 내 HTML 문서에서

는 cytoscapeweb의 사업부는

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

에서을 (단지 컨텍스트를 제공하는) JQuery와 탭 위젯에 포함

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을 숨기고있는 것 같습니다. Cytoscape 웹 뷰포트는 0x0 px가되기 때문에 display: none;을 사용하지 않아야합니다. position: absolute; left: -9999px; 또는 숨기기와 유사한 것을 시도하십시오. 이것은 숨겨진 탭 (아마도 .ui-state-hidden 또는 비슷한 것)에 대해 jQuery가 사용하는 클래스 이름을 수정하는 것을 수반합니다.

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