cytoscape web - How to add more nodes to a cytoscpae graph -
hi trying convert cytoscape-web 1 application cytoscape-web 2 application.
i have trivial example using fixed set of elements created element: portion of initial call cytoscape web. want add more elements existing graph. have tried using add , load.
add nothing there no failure no change existing graph
load gets , error:
[19:29:52.005] json undefined @ http://127.0.0.1:8020/lifescience/jquery.cytoscapeweb.all.js:1918
the code pretty trivial reproduce
<!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; } /* cytoscape web container must have 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"> 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>
would appreciate opinions on doing wrong or perhaps example corrected.
thanks appreciated
(1) cy.load()
loads new graph, replacing what's there. (2) cy.add()
adds elements, elements can not displayed without specifying position.
Comments
Post a Comment