Мне нужен код для гиперссылки, которая активируется при нажатии на узлы?
Я должен просматривать свои данные в виде визуального сетевого формата, поэтому использовал cytoscape web. Я использовал пример ссылки 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>
3 ответа
Привязать к click событие и набор window.location.href соответственно в обработчике.
Я создал функцию, которая щелкает правой кнопкой мыши по ссылке (очевидно, вы можете изменить эту часть на любую, какую захотите:
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'},
Предполагая, что сетевые данные имеют атрибут узла под названием "ссылка", вы можете сделать что-то вроде этого:
vis.addListener("click", "nodes", function(evt) {
var node = evt.target;
var link = node.data.link;
window.open(link);
});
Увидеть:
http://cytoscapeweb.cytoscape.org/documentation/visualization http://cytoscapeweb.cytoscape.org/documentation/events
Конечно, вы можете получить ссылки из любой точки мира, например, из собственного кэша данных, хранящегося в объекте JavaScript. Вам не нужно хранить их в Cytoscape Web как атрибуты узла, но это может быть более удобным.