J'essaie de rendre les nœuds réseau interactifs en utilisant qtip. Ce code fonctionne avec un réseau codé en dur mais ne fonctionne pas lorsqu'un fichier réseau est chargé (format JSON). Ceci est le lien vers le fichier réseau [AKT1.cyjs] [1]Ouvrez un site Web lorsque vous cliquez sur le nœud dans Cytoscape.js
<!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
C'est le code qui fonctionne
<!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>
avez-vous vérifié que le contenu des données href est correctement analysé par une URL valide? peut-être que le problème est dans le lien lui-même, plutôt que dans cytoscape. – BeerBaron