0

I have to view my data as a visual network format so used cytoscape web. I have used example link http://lekshmideepu.blogspot.in/2012/03/cytoscape-web-examples.html for my drawing a network with different colored nodes and edges,It works color and size for node/edge. I need to set one more event hyperlink for each node. please need on-click event node as 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 could alternatively be 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 and draw
            // initialization options
                var options = {
                    swfPath: "swf/CytoscapeWeb",
                    flashInstallerPath: "swf/playerProductInstall"
                };

                var vis = new org.cytoscapeweb.Visualization("cytoscapeweb", options);

             // visual style we will use
                var visual_style = {
                    global: {
                        backgroundColor: "#ABCFD6"
                    },
                    nodes: {
                        shape: "circle",
                        borderWidth: 2,
                        borderColor: "#ffffff",
                        // setting different size to the nodes
                        size: {
                            defaultValue: 20,
                            continuousMapper: { attrName: "weight", minValue: 30, maxValue: 60 }
                        },
                        //setting different color to the 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 to the edges
                        color : {
                            discreteMapper : {
                                attrName : "id",
                                entries : [ {
                                    attrValue : "gene",
                                    value : "red"
                                }, {
                                    attrValue : "miR",
                                    value : "white"
                                }, {
                                    attrValue : "miR1",
                                    value : "blue"
                                } ]
                            }
                        }
                    }
                };

                var draw_options = {
                    // your data goes here
                    network: xml,

                    // show edge labels too
                    edgeLabelsVisible: false,


                 // set the style at initialisation
                    visualStyle : visual_style,

                    // circle layout for nodes
                    layout: "circle",

                    // hide pan zoom
                    panZoomControlVisible: true 
                };

                vis.draw(draw_options);

            };
            </script>

            <style>
                /* The Cytoscape Web container must have its 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 will replace the contents of this div with your graph.
            </div>
        </body>

    </html>
maxkfranz
  • 11,896
  • 1
  • 27
  • 36
user2502386
  • 49
  • 1
  • 7

3 Answers3

1

Bind to the click event and set window.location.href appropriately in the handler.

maxkfranz
  • 11,896
  • 1
  • 27
  • 36
  • Please i didnt get clear please give simple sample code for hyperlink that is activated while clicking on nodes – user2502386 Jul 27 '13 at 05:35
0

Assuming the network data has a node attribute called "link", you can do something like this:

vis.addListener("click", "nodes", function(evt) {
    var node = evt.target;
    var link = node.data.link;
    window.open(link);
});

See:

http://cytoscapeweb.cytoscape.org/documentation/visualization#section/addListener http://cytoscapeweb.cytoscape.org/documentation/events#section/EventType

Of course, you can get the links from anywhere you want, like your own data cache stored in a JavaScript object, for instance. You don't need to store them in Cytoscape Web, as node attributes, but that may be more convenient.

Christian Lopes
  • 1
0

I created a function which goes to a link by a right-click (obviously you can change that part to whatever you want:

 cy.on('cxttap','node', function(e){
  var url=this.data('link');
   window.open(url);

});

And the "data" part of the element looks like this:

{ data: { id: 'a', name: 'a',link:'http://google.com' },classes:'a'},
user2777158
  • 1
  • 1