Javascript 在Cytoscape.js中单击节点时打开网站
我正在尝试使用qtip使网络节点交互。此代码适用于硬编码网络，但在加载网络文件（JSON格式）时不起作用。这是指向网络文件[AKT1.cyjs][1]的链接Javascript 在Cytoscape.js中单击节点时打开网站,javascript,html,json,cytoscape.js,qtip,Javascript,Html,Json,Cytoscape.js,Qtip,我正在尝试使用qtip使网络节点交互。此代码适用于硬编码网络，但在加载网络文件（JSON格式）时不起作用。这是指向网络文件[AKT1.cyjs][1]的链接 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <meta name="viewport" content="user-scalable=no, initial-scale=1.0, minim
<!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
正文{
字体：14px helvetica neue，helvetica，arial，无衬线；
}
#赛义德{
保证金：自动；
边框：1px实心#ddd；
身高：100%；
宽度：100%；
最高：20%；
溢出：自动！重要；
边界半径：0.25em；
位置：绝对位置；
保证金：4倍；
背景：#000；
}
$（函数（）{
$.get（'AKT1.cyjs'，函数（数据）{
$（'#cy'）。细胞景观({
样式：cytoscape.stylesheet（）
.selector（'节点'）
.css({
“内容”：“数据（名称）”，
'text valign'：'bottom'，
“颜色”：“白色”，
“字体大小”：10，
“背景色”：“绿色”
})
.selector（'边'）
.css({
'目标箭头形状'：'三角形'，
“线条颜色”：“绿色”，
“曲线样式”：“干草堆”，
“干草堆半径”：0，
“宽度”：“数据（比率）”
})
.selector（“：selected”）
.css({
“背景色”：“黑色”，
“线条颜色”：“黑色”，
“目标箭头颜色”：“黑色”，
“源箭头颜色”：“黑色”
})
.selector（“.flated”）
.css({
“不透明度”：0.25，
“文本不透明度”：0
}),
元素：JSON.parse（数据），
})
})
cy.on（'tap'，'node'，function（）{
试试{
window.open（this.data（'href'））；
}第（e）款{
window.location.href=this.data（'href'）；
}
})
});
[1]: https://drive.google.com/file/d/0BzPzj3CcWJQiS3JScFpJMi04ZTQ/view?usp=sharing
<!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>
链接示例
正文{
字体：14px helvetica neue，helvetica，arial，无衬线；
}
#cy3{
保证金：自动；
边框：1px实心#ddd；
身高：100%；
宽度：100%；
最高：30%；
溢出：自动！重要；
边界半径：0.25em；
位置：绝对位置；
左：20%；
保证金：4倍；
背景：#000；
}
$（函数（）{//on dom ready
var cy3=细胞景观({
容器：$（'#cy3'）[0]，
boxSelectionEnabled:false，
自动取消选择：true，
样式：cytoscape.stylesheet（）
.selector（'节点'）
.css({
“内容”：“数据（名称）”，
'text valign'：'bottom'，
“颜色”：“白色”，
“字体大小”：10，
“背景色”：“数据（faveColor）”
})
.selector（'边'）
.css({
'目标箭头形状'：'三角形'，
“线条颜色”：“数据（faveColor）”，
“曲线样式”：“干草堆”，
“干草堆半径”：0，
“宽度”：“数据（比率）”
})
.selector（“：selected”）
.css({
“背景色”：“黑色”，
“目标箭头颜色”：“黑色”，
“源箭头颜色”：“黑色”
})
.selector（“.flated”）
.css({
“不透明度”：1，
“文本不透明度”：0
}),
要素：{
节点：[
{
数据：{
'id'：'415'，
“名称”：“ACTR3”，
faveColor:'绿色'，
href:'http://js.cytoscape.org'
}
}, {
数据：{
'id'：'414'，
“名称”：“CFL1”，
faveColor:'绿色'，
href:'http://js.cytoscape.org'
}
}, {
数据：{
'id'：'413'，
“名称”：“EIF4A1”，
faveColor:'绿色'，
href:'http://js.cytoscape.org'
}
}, {
数据：{
'id'：'412'，
“名称”：“HMGB1”，
faveColor:'绿色'，
href:'http://js.cytoscape.org'
}
}, {
数据：{
'id'：'411'，
“名称”：“HMGB1P1”，
爱好