0

データを視覚的なネットワーク形式として表示する必要があるため、サイトスケープ Web を使用しました。さまざまな色のノードとエッジを持つネットワークを描画するために、リンクの例http://lekshmeepu.blogspot.in/2012/03/cytoscape-web-examples.htmlを使用しました。ノード/エッジの色とサイズが機能します。ノードごとにもう 1 つのイベント ハイパーリンクを設定する必要があります。ネットワークのハイパーリンクとしてオンクリック イベント ノードが必要ですか?

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

3 に答える 3

1

clickイベントにバインドしwindow.location.href、ハンドラーで適切に設定します。

于 2013-07-25T17:50:22.337 に答える
0

右クリックでリンクに移動する関数を作成しました（明らかに、その部分を好きなように変更できます：

 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'},
于 2013-10-23T12:17:24.330 に答える
0

ネットワーク データに「リンク」と呼ばれるノード属性があると仮定すると、次のようなことができます。

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 に保存する必要はありませんが、その方が便利な場合があります。

于 2013-07-29T16:38:44.647 に答える