English 中文(简体)
正在初始化 cytuscape
原标题: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();

在我的 html 文档中, cytoscape web div 嵌入到 jquery 标签部件中( 仅提供上下文)

在我的某处

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

我错过了明显的东西吗?

如果是,请致以歉意。

问题回答

(1) 即使您重新测试, 也不要在代码中设置这样的警示。 它可以打破非同步代码, 比如初始化 Cytoscape Web 或按 AJAX 调用 。 代之以使用 < code>conole.log ()

(2) 您可能用标签将Cytoscape Web div, cy 和标签隐藏起来。 您不应该使用 display: no; , 因为 Cytoscape Web 视图站将是 0x0 px。 尝试使用 < code> 位置: 绝对; 左: - 99999px; 或 simliair 等东西隐藏。 这意味着要修改隐藏标签( 可能 < code>. uii- state-hidden 或类似标签) 的任何类名 jQuery 。

(3) 我将研究如何使制造者代码更容恕隐藏的Cytoscape Web divs。

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




相关问题
正在初始化 cytuscape

正在更新到 cytoscape 2, 我正跟随其中一个例子学习如何使用 API 。 我无法让它工作, 火虫报告以下信息: 组件返回...

Example with discreteMapper

I d like to use the discreteMapper of CytoscapeWeb 2.0 (that is, the jQuery-based CytoscapeWeb) but need some example code showing what exactly I have to do. I already tried with some code taken from ...

热门标签