gpt4 book ai didi

javascript - Cytoscape.js 无法读取未定义的属性 'qtip'

转载 作者:行者123 更新时间:2023-11-29 18:46:39 26 4
gpt4 key购买 nike

除了 Cytoscape.js 之外,我还尝试使用 Qtip 在鼠标悬停节点上显示工具提示。我按照指南 there但我无法让它工作,当我的鼠标悬停在节点上时出现此错误: enter image description here

这是与错误相关的代码:

cy.on('mouseover', 'node', function(event) {
var node = event.cyTarget;
node.qtip({
content: 'hello',
show: {
event: event.type,
ready: true
},
hide: {
event: 'mouseout unfocus'
}
}, event);
});

这是我调用 .js 文件的索引:

<!DOCTYPE>
<html>
<head>
<title>cytoscape-dagre.js demo</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<link href="css/style.css" rel="stylesheet" />
<link type="text/css" rel="stylesheet" href="css/jquery.qtip.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>
<body>
<div id="cy"></div>
<script type="text/javascript" src="json/data_error.json"></script>

<script src="js/jquery.qtip.min.js"></script>
<script src="js/cytoscape.min.js"></script>
<script src="js/cytoscape-qtip.js"></script>
<script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>

<script src="js/code.js"></script>
</body>
</html>

我做错了什么?非常感谢!

最佳答案

错误是var node = event.cyTarget,没有cyTarget这个属性,所以直接调用event.target,你就是gucci:

var cy = window.cy = cytoscape({
container: document.getElementById('cy'),

boxSelectionEnabled: false,
autounselectify: true,

style: [{
selector: 'node',
css: {
'content': 'data(id)',
'text-valign': 'center',
'text-halign': 'center',
'height': '60px',
'width': '60px',
'border-color': 'black',
'border-opacity': '1',
'border-width': '10px'
}
},
{
selector: '$node > node',
css: {
'padding-top': '10px',
'padding-left': '10px',
'padding-bottom': '10px',
'padding-right': '10px',
'text-valign': 'top',
'text-halign': 'center',
'background-color': '#bbb'
}
},
{
selector: 'edge',
css: {
'target-arrow-shape': 'triangle'
}
},
{
selector: ':selected',
css: {
'background-color': 'black',
'line-color': 'black',
'target-arrow-color': 'black',
'source-arrow-color': 'black'
}
}
],
layout: {
name: 'circle'
}
});

var info = [{
"name": "Peter",
"next_op_name": "Claire",
}, {
"name": "Claire",
"next_op_name": "Mike",
}, {
"name": "Mike",
"next_op_name": "Rosa",
}, {
"name": "Rosa",
"next_op_name": "Peter",
}];

cy.ready(function() {
var array = [];
// iterate over info once
for (var i = 0; i < info.length; i++) {
array.push({
group: 'nodes',
data: {
id: info[i].name, // id is name!!!
label: info[i].name
}
});
array.push({
group: 'edges',
data: {
id: 'e' + i,
source: info[i].name,
target: info[i].next_op_name
}
});
}
cy.add(array);
cy.layout({
name: 'circle'
}).run();
});


// Important part
cy.on('mouseover', 'node', function(event) {
var node = event.target; // cy.target is the right choice here
node.qtip({
content: 'hello',
show: {
event: event.type,
ready: true
},
hide: {
event: 'mouseout unfocus'
}
}, event);
});
body {
font: 14px helvetica neue, helvetica, arial, sans-serif;
}

#cy {
height: 100%;
width: 75%;
position: absolute;
left: 0;
top: 0;
float: left;
}
<html>

<head>
<meta charset=utf-8 />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.17/cytoscape.min.js"></script>
<!-- qtip imports -->
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/qtip2/2.2.0/jquery.qtip.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-qtip/2.7.0/cytoscape-qtip.js"></script>

<!-- dagre imports -->
<script src="https://unpkg.com/dagre@0.7.4/dist/dagre.js"></script>
<script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
</head>

<body>
<div id="cy"></div>
</body>

</html>

关于javascript - Cytoscape.js 无法读取未定义的属性 'qtip',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53341269/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com