0

您好我正在尝试将 cytoscape-web 1 应用程序转换为 cytoscape-web 2 应用程序。

我有一个简单的例子，它使用一组固定的元素创建为元素：对 cytoscape web 的初始调用的一部分。然后我想向现有图表添加更多元素。我尝试过使用添加和加载。

add 什么都不做，没有失败，但也没有改变我现有的图表

加载获取和错误：

[19:29:52.005] json is undefined @ http://127.0.0.1:8020/LifeScience/jquery.cytoscapeweb.all.js:1918

代码很容易重现

<!DOCTYPE html>

<html>
<head>
    <title>Test Cyto</title>



    <style>
        * {
            margin: 0;
            padding: 0;
            font-family: Helvetica, Arial, Verdana, sans-serif;
        }
        html, body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        body {
            line-height: 1.5;
            color: #000000;
            font-size: 14px;
        }
        /* The Cytoscape Web container must have its dimensions set. */
        #cy {
            width: 100%;
            height: 50%;
        }
        #note {
            width: 100%;
            height: 25%;
            background-color: #f0f0f0;
            overflow: auto;
        }
        p {
            padding: 0 0.5em;
            margin: 0;
        }
        p:first-child {
            padding-top: 0.5em;
        }
    </style>

</head>

<body>

    <p id="demo">
        Test Demo
    </p>
    <button id="runQ2">
        Do display
    </button>

    <div>
        <p>
            Graph Image
        </p>
    </div>

    <div id="cy" style="width:1200px;height:500px;">
    </div>

    <div id="note">
    </div>
</body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">

    </script>

    <script type="text/javascript" src="jquery.cytoscapeweb.all.js">

    </script>


    <script type="text/javascript">


$(document).ready(function() {
$("button#runQ2").click(function() {
    draw_graph();
});
});

function draw_graph() {

$("#cy").cytoscapeweb({

    elements : {
        nodes : [{
            data : {
                id : "a"
            }
        }, {
            data : {
                id : "b"
            }
        }, {
            data : {
                id : "c"
            }
        }],

        edges : [{
            data : {
                id : "ab",
                source : "a",
                target : "b"
            }
        }, {
            data : {
                id : "bc",
                source : "b",
                target : "c"
            }
        }, {
            data : {
                id : "ca",
                source : "c",
                target : "a"
            }
        }, {
            data : {
                id : "ac",
                source : "a",
                target : "c"
            }
        }]
    },
    ready : function(cth) {
        //cth.add({ group: "nodes", data: { id: "n0" } });
        cth.load([{
            data : {
                id : "n1"
            },
            group : "nodes"
        }, {
            data : {
                id : "n2"
            },
            group : "nodes"
        }, {
            data : {
                id : "e1",
                source : "n1",
                target : "n2"
            },
            group : "edges"
        }]);
        alert("in ready function" + graphArray);
    }
})
}
</script>       
</html>

非常感谢对我做错了什么或我的例子更正的任何意见。

非常感谢

4

1 回答 1

0

(1)cy.load()加载一个新图表，替换已经存在的图表。（2）cy.add()添加元素，但是你的元素不指定任何位置是无法显示的。

于 2012-06-06T15:38:45.740 回答