0
Мне нужно просматривать мои данные в качестве визуального сетевого формата, так используемого cytoscape web. Я использовал пример link http://lekshmideepu.blogspot.in/2012/03/cytoscape-web-examples.html для моего рисунка сети с разными цветными узлами и краями. Он работает с цветом и размером для узла/края. Мне нужно установить еще одну гиперссылку на события для каждого узла. вам нужен узел событий click-click в качестве гиперссылки в сети?Мне нужен код для гиперссылки, который активируется при нажатии на узлы?
<!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>
Пожалуйста, я не получил ясно, пожалуйста, дайте простой пример кода для гиперссылке, которая активируется при нажатии на узлах – user2502386