初始化cytoscape

问题描述

我是cytoscapeweb 2的新手，我在遵循提供的示例之一，以学习如何使用API​​.我无法使其工作，并且Firebug报告以下消息:

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:

在我的html文档中，cytoscapeweb div嵌入在jquery选项卡小部件中(仅用于提供上下文)

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

my.html中的某处

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>

和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?

如果是，则表示歉意.

推荐答案

(1)即使在进行测试时，也不要在代码中放置警报.它可能会破坏异步代码，例如初始化Cytoscape Web或进行AJAX调用.改为使用console.log().

(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)您可能使用选项卡隐藏了Cytoscape Web div cy.您不应该使用display: none;，因为Cytoscape Web视口将为0x0 px.尝试使用position: absolute; left: -9999px;之类的类似方法进行隐藏.这需要修改jQuery用于隐藏选项卡的任何类名(可能是.ui-state-hidden或类似名称).

(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)我将研究使渲染器代码更能容忍隐藏的Cytoscape Web div.

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

这篇关于初始化cytoscape的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！