javascript - i need code for hyperlink that is activated while clicking on nodes? -
i have view data visual network format used cytoscape web. have used example link http://lekshmideepu.blogspot.in/2012/03/cytoscape-web-examples.html drawing network different colored nodes , edges,it works color , size node/edge. need set 1 more event hyperlink each node. please need on-click event node hyperlink in network?
<!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="js/ac_oetags.min.js"></script> <script type="text/javascript" src="js/json2.min.js"></script> <script type="text/javascript" src="js/cytoscapeweb.min.js"></script> </head> <script type="text/javascript"> window.onload=function() { // network data alternatively grabbed via ajax var xml = '\ <graphml>\ <key id="label" for="all" attr.name="label" attr.type="string"/>\ <key id="weight" for="node" attr.name="weight" attr.type="double"/>\ <graph edgedefault="undirected">\ <node id="1"><data key="label">1</data><data key="weight">.7</data></node>\ <node id="2"><data key="label">2</data><data key="weight">.5</data></node>\ <node id="3"><data key="label">3</data><data key="weight">.5</data></node>\ <node id="4"><data key="label">4</data><data key="weight">.5</data></node>\ <node id="5"><data key="label">5</data><data key="weight">.2</data></node>\ <node id="6"><data key="label">6</data><data key="weight">.2</data></node>\ <edge source="1" target="2" id="gene"></edge>\ <edge source="2" target="3" id="gene"></edge>\ <edge source="4" target="5" id="gene"></edge>\ <edge source="3" target="4" id="mir"></edge>\ <edge source="6" target="5" id="mir"></edge>\ <edge source="4" target="2" id="mir1"></edge>\ <edge source="6" target="1" id="mir1"></edge>\ </graph>\ </graphml>\ '; // init , draw // initialization options var options = { swfpath: "swf/cytoscapeweb", flashinstallerpath: "swf/playerproductinstall" }; var vis = new org.cytoscapeweb.visualization("cytoscapeweb", options); // visual style use var visual_style = { global: { backgroundcolor: "#abcfd6" }, nodes: { shape: "circle", borderwidth: 2, bordercolor: "#ffffff", // setting different size nodes size: { defaultvalue: 20, continuousmapper: { attrname: "weight", minvalue: 30, maxvalue: 60 } }, //setting different color node color : { discretemapper : { attrname : "id", entries : [ { attrvalue : "1", value : "red" }, { attrvalue : "2", value : "gray" }, { attrvalue : "3", value : "gray" }, { attrvalue : "4", value : "gray" }, { attrvalue : "5", value : "yellow" }, { attrvalue : "6", value : "yellow" } ] } }, labelhorizontalanchor: "center" }, edges : { width : 2, //setting different color edges color : { discretemapper : { attrname : "id", entries : [ { attrvalue : "gene", value : "red" }, { attrvalue : "mir", value : "white" }, { attrvalue : "mir1", value : "blue" } ] } } } }; var draw_options = { // data goes here network: xml, // show edge labels edgelabelsvisible: false, // set style @ initialisation visualstyle : visual_style, // circle layout nodes layout: "circle", // hide pan zoom panzoomcontrolvisible: true }; vis.draw(draw_options); }; </script> <style> /* cytoscape web container must have dimensions set. */ html, body { height: 100%; width: 100%; padding: 0; margin: 0; } #cytoscapeweb { width: 100%; height: 100%; } </style> </head> <body> <div id="cytoscapeweb"> cytoscape web replace contents of div graph. </div> </body> </html>
bind click event , set window.location.href appropriately in handler.
Comments
Post a Comment