为什么cytoscape节点需要两个水龙头而不是一个来触发点击事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了为什么cytoscape节点需要两个水龙头而不是一个来触发点击事件相关的知识，希望对你有一定的参考价值。
我正在使用cytoscape.js构建网络视图，需要在节点上捕获tap事件。事件在边缘和背景上触发很好，但需要两次点击才能在节点上触发。我使用了如下所示的“点击”和“点按”事件，但仍然无法在第一次点按时触发事件。任何线索！？
cy.on('tap',function(e){
// console.log(e)
console.log('click detected ', e)
})
谢谢
答案
在绑定事件之前，您总是需要取消绑定事件，否则您可能会遇到一些触发事件的事件。
此外，您应指定要将事件绑定到哪些元素，因此要么“节点”，“边缘”或所有内容。这样你的事件就更准确了。
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: "edge[label]",
css: {
label: "data(label)",
"text-rotation": "autorotate",
"text-margin-x": "0px",
"text-margin-y": "0px"
}
},
{
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,
label: "e" + i
}
});
}
cy.add(array);
cy.layout({
name: "circle"
}).run();
});
// Here is the important part
cy.unbind("tap"); // unbind event to prevent possible mishaps with firing too many events
cy.bind("tap", function(evt) { // bind with .bind() (synonym to .on() but more intuitive
console.log(evt.target);
});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 />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
<script src="https://unpkg.com/cytoscape@3.3.0/dist/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>以上是关于为什么cytoscape节点需要两个水龙头而不是一个来触发点击事件的主要内容，如果未能解决你的问题，请参考以下文章
D3.js 和 Cytoscape.js 有啥区别？ [关闭]
如何在不使用 cytoscape.js 重绘图形的情况下删除特定边？