我正在使用带有cytoscape-node-html-label扩展名的Cytoscape.js来绘制复杂的HTML节点。 我的目标是在用户将鼠标悬停在此HTML节点中的某些区域上时显示工具提示。但是，我似乎根本无法访问鼠标事件。我可以使用Cytoscapes功能监听整个节点上的鼠标事件：
cy.on('mouseover', 'node', function(evt){
var node = evt.target;
});
但是尝试在节点标签（它们具有唯一的ID）内的HTML元素上使用常规jQuery事件不起作用。该事件不会触发。我猜这是因为此HTML是以某种方式在画布中绘制的，而扩展名并未实现此功能。我尝试过：
$('#' + id_of_elem).hover(function(evt){
...
});
该扩展名提供了一个启用指针事件的选项，但它不会更改任何内容。我这样配置扩展名：
cy.nodeHtmlLabel([{
query: '.machineNode',
valign: 'center',
halign: 'center',
valignBox: 'center',
halignBox: 'center',
tpl: function(data) {
return [HTML code here];
}
}
], {
enablePointerEvents: true
});
有人知道如何实现我的目标吗？欢迎有其他选择。您是否认为有办法实施这些事件？
我相信您可以通过其他cytoscape扩展来实现您想要的。这是一个可运行的代码，它绘制了一个包含2个节点和1个边的简单图形。当触发“ mouse-over”事件时，使用Cytoscape-popper，popper和tippy扩展名来生成弹出文本。
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
style: [
{
selector: "node",
style: {
content: "data(id)"
}
},
{
selector: "edge",
style: {
"curve-style": "bezier",
"target-arrow-shape": "triangle"
}
},
{
selector: 'node.game_mkr',
style: {
shape: 'octagon',
width: 25,
height: 25,
'background-color': 'magenta',
label: 'Game Marker',
'font-size': 14,
'text-background-color': 'white',
'text-background-padding': '2px',
'text-background-opacity': 0.85,
}
}
],
elements: {
nodes: [
{
data: {
id: "a",
text: "For gaming"
},
classes: "game_mkr"
},
{
data: {
id: "b",
text: "For work"
}
}
],
edges: [
{
data: {
id: "ab",
source: "a",
target: "b",
text: "Sample edge"
}
}
],
},
layout: {
name: "grid"
}
}));
function makePopper(ele) {
let ref = ele.popperRef(); // used only for positioning
ele.tippy = tippy(ref, {
// tippy options:
content: () => {
let contentdiv = document.createElement("div");
let ctent = "<strong>ID: </strong>";
ctent += "<b>"+ele.id()+"</b>";
ctent += "<br/><button type='button' onclick='alert(\"Hello.\")' title='"+ ele.data().text +"'>Click Me!</button>";
contentdiv.innerHTML = ctent;
return contentdiv;
},
arrow: true,
allowHTML: true,
interactive: true,
trigger: "manual" //when use program to handle
});
}
cy.ready(function() {
cy.elements().forEach(function(ele) {
makePopper(ele);
});
});
cy.elements().unbind("mouseover");
cy.elements().bind("mouseover", event => event.target.tippy.show());
cy.elements().unbind("mouseout");
cy.elements().bind("mouseout", event => event.target.tippy.hide());
// cy.elements().unbind("click");
// cy.elements().bind("click", event => {event.target.tippy.show()});
//let insta = event.target.tippy;
//console.log(insta)
// cy.elements().unbind("mouseover");
// cy.elements().bind("mouseover", event => event.target.tippy.hide());
});body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}<head>
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/cytoscape-popper.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/index.all.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/index.css" />
</head>
<body>
<div id="cy"></div>
</body>