Initializing cytoscape

问题

being new to cytoscapeweb 2, i am following one of the provided example in order to learn how to use the API. i cant make it work and firebug reports the following message:

Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) var n = this.nodesGroup.getBBox();

in my html document, the cytoscapeweb div is embedded in a jquery tab widget (just to provide context)

somewhere in 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>

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

Did i miss something obvious?

If so, all apologies.

回答1:

(1) Don't put alerts in your code like that even when you're testing. It can break asynchronous code, like initialising Cytoscape Web or doing an AJAX call. Use console.log() instead.

(2) You're probably hiding the Cytoscape Web div, cy, with the tabs. You shouldn't be using display: none;, because the Cytoscape Web viewport will then be 0x0 px. Try something like position: absolute; left: -9999px; or similiar for hiding. This entails modifying whatever class name jQuery uses for hidden tabs (probably .ui-state-hidden or something similar).

(3) I'll look into making the renderer code more tolerant of hidden Cytoscape Web divs.

回答2:

I have a better solution to this problem: Execute jquery tab just after all of the graphs are loaded. 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();           
           }
       });
    }

来源：https://stackoverflow.com/questions/10740269/initializing-cytoscape