мне нужен код для гиперссылки, которая активируется при нажатии на узлы?

Я должен просматривать свои данные в формате визуальной сети, поэтому использовал сеть Cytoscape. Я использовал пример ссылки http://lekshmideepu.blogspot.in/2012/03/cytoscape-web-examples.html для моего рисования сети с узлами и ребрами разного цвета. Он работает с цветом и размером для узла/ребра. Мне нужно установить еще одну гиперссылку события для каждого узла. пожалуйста, нужен узел событий по щелчку в качестве гиперссылки в сети?

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

javascript tooltip cytoscape cytoscape-web
person user2502386    schedule 24.07.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Привяжите к событию click и установите window.location.href соответствующим образом в обработчике.

person maxkfranz    schedule 25.07.2013
comment
Пожалуйста, я не понял, пожалуйста, дайте простой пример кода для гиперссылки, которая активируется при нажатии на узлы - person user2502386; 27.07.2013

arrow_upward
0
arrow_downward

Предполагая, что сетевые данные имеют атрибут узла, называемый «ссылка», вы можете сделать что-то вроде этого:

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

Видеть:

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

Конечно, вы можете получить ссылки откуда угодно, например, из собственного кеша данных, хранящегося в объекте JavaScript. Вам не нужно хранить их в Cytoscape Web как атрибуты узла, но это может быть более удобно.

person Christian Lopes    schedule 29.07.2013

arrow_upward
0
arrow_downward

Я создал функцию, которая переходит по ссылке, щелкнув правой кнопкой мыши (очевидно, вы можете изменить эту часть на все, что хотите:

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

});

А часть «данные» элемента выглядит так:

{ data: { id: 'a', name: 'a',link:'http://google.com' },classes:'a'},
person user2777158    schedule 23.10.2013