Question

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

我有一个简单的例子，使用一组固定的元素作为元素：初始调用cytoscape web的一部分。然后我想在现有图表中添加更多元素。我尝试过使用add和load。

添加没有任何失败，但也没有改变我现有的图

加载获取和错误：

[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>

非常感谢任何关于我做错事的意见，或者我的例子可能已得到纠正。

由于非常赞赏

Answer 1

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

如何向cytoscape图添加更多节点

1 个答案: