I am trying to make the network nodes interactive using qtip. This code works with a hard coded network but doesn't work when a network file loads up (JSON format). This is the link to the network file [AKT1.cyjs][1]
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"> </script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
</head>
<body>
<div id="cy"></div>
<style>
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy {
margin: auto;
border: 1px solid #ddd;
height: 100%;
width: 100%;
top: 20%;
overflow: auto !important;
border-radius: 0.25em;
position: absolute;
margin:4px;
background:#000;
}
</style>
<script>
$(function() {
$.get( 'AKT1.cyjs', function( data ) {
$('#cy').cytoscape({
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'bottom',
'color': 'white',
'font-size': 10,
'background-color': 'Green'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'line-color': 'Green',
'curve-style':'haystack',
'haystack-radius': 0,
'width':'data(Ratio)'
})
.selector(':selected')
.css({
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 0.25,
'text-opacity': 0
}),
elements : JSON.parse(data),
})
})
cy.on('tap', 'node', function(){
try {
window.open( this.data('href') );
} catch(e){
window.location.href = this.data('href');
}
})
});
</script>
[1]: https://drive.google.com/file/d/0BzPzj3CcWJQiS3JScFpJMi04ZTQ/view?usp=sharing
This is the code that works
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<title>Linkout example</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.js"></script>
</head>
<style>
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}
#cy3 {
margin: auto;
border: 1px solid #ddd;
height: 100%;
width: 100%;
top: 30%;
overflow: auto !important;
border-radius: 0.25em;
position: absolute;
left:20%;
margin:4px;
background:#000;
}
</style>
<script>
$(function(){ // on dom ready
var cy3 = cytoscape({
container: $('#cy3')[0],
boxSelectionEnabled: false,
autounselectify: true,
style: cytoscape.stylesheet()
.selector('node')
.css({
'content': 'data(name)',
'text-valign': 'bottom',
'color': 'white',
'font-size': 10,
'background-color': 'data(faveColor)'
})
.selector('edge')
.css({
'target-arrow-shape': 'triangle',
'line-color': 'data(faveColor)',
'curve-style':'haystack',
'haystack-radius': 0,
'width':'data(Ratio)'
})
.selector(':selected')
.css({
'background-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
})
.selector('.faded')
.css({
'opacity': 1,
'text-opacity': 0
}),
elements : {
nodes: [
{
data : {
'id' : '415',
'name' : 'ACTR3',
faveColor: 'green',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '414',
'name' : 'CFL1',
faveColor: 'green',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '413',
'name' : 'EIF4A1',
faveColor: 'green',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '412',
'name' : 'HMGB1',
faveColor: 'green',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '411',
'name' : 'HMGB1P1',
faveColor: 'green',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '410',
'name' : 'HSP90AB2P',
faveColor: 'green',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '409',
'name' : 'HSPB1',
faveColor: 'green',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '408',
'name' : 'P4HB',
faveColor: 'green',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '407',
'name' : 'TRIM72',
faveColor: 'green',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '402',
'name' : 'CASP9',
faveColor: 'white',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '401',
'name' : 'HPRT1',
faveColor: '#B00000',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '400',
'name' : 'AKAP12',
faveColor: '#B00000',
href: 'http://js.cytoscape.org'
}
}, {
data : {
'id' : '398',
'name' : 'RNPEP',
faveColor: '#B00000',
href: 'http://js.cytoscape.org'
}
} ],
edges : [ {
data : {
'id' : '424',
'source' : '402',
'target' : '415',
faveColor: 'green',
Ratio: 1.683
}
}, {
data : {
'id' : '423',
'source' : '402',
'target' : '414',
faveColor: 'green',
Ratio: 2
}
}, {
data : {
'id' : '422',
'source' : '402',
'target' : '413',
faveColor: 'green',
Ratio: 2
}
}, {
data : {
'id' : '421',
'source' : '402',
'target' : '412',
faveColor: 'green',
Ratio: 2
}
}, {
data : {
'id' : '420',
'source' : '402',
'target' : '411',
faveColor: 'green',
Ratio: 2
}
}, {
data : {
'id' : '419',
'source' : '402',
'target' : '410',
faveColor: 'green',
Ratio: 2
}
}, {
data : {
'id' : '418',
'source' : '402',
'target' : '409',
faveColor: 'green',
Ratio: 2
}
}, {
data : {
'id' : '417',
'source' : '402',
'target' : '408',
faveColor: 'green',
Ratio:1.2
}
}, {
data : {
'id' : '416',
'source' : '402',
'target' : '407',
faveColor: 'green',
Ratio: 1.2
}
}, {
data : {
'id' : '406',
'source' : '402',
'target' : '401',
faveColor: '#B00000',
Ratio:2.12
}
}, {
data : {
'id' : '405',
'source' : '402',
'target' : '400',
faveColor: '#B00000',
Ratio:1.843
}
}, {
data : {
'id' : '404',
'source' : '402',
'target' : '402',
faveColor: 'white',
Ratio:1
}
}, {
data : {
'id' : '403',
'source' : '402',
'target' : '398',
faveColor: '#B00000',
Ratio: 1.49959
}
} ]
},
});
cy3.on('tap', 'node', function(){
try { // your browser may block popups
window.open( this.data('href') );
} catch(e){ // fall back on url change
window.location.href = this.data('href');
}
});
}); // on dom ready
</script>
<body>
<div id="cy3"></div>
</body>
</html>
