我整理了一个最小的Cytoscape示例。我可以显示图表，但是我对处理事件最感兴趣，这就是我遇到的困难。
问题是，除了能够访问各个元素的属性之外，我还看到任何事件的目标都未定义。
下面是我的整个html文件。请注意-我仅对该行感兴趣
cy.nodes（）。bind（'mouseover'，（e）=> console.log（e.target））;
[当我查看控制台时，每当将鼠标指针移到节点上时，我只能看到“未定义”。如上所述，我希望最终能够访问元素属性。
<!doctype html>
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src="cytoscape.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div id="cy"></div><script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
{ data: { id: 'a' } },
{ data: { id: 'b' } },
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}]
});
cy.unbind("tap");
cy.bind("tap", "edge",function(evt) {
var tgt=this;
alert(tgt);
});
cy.nodes().bind('mouseover', (e) => console.log(e.target));
</script>
</body>
</html>
您可以在下面的代码段中看到一个有效的示例，我真的只是更改了导入，没有别的了：
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [{
data: {
id: 'a'
}
},
{
data: {
id: 'b'
}
},
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
}
]
});
cy.unbind("tap");
cy.bind("click", "node, edge", function(evt) {
var tgt = evt.target.data();
console.log(tgt);
});
cy.nodes().bind('mouseover', (e) => console.log(e.target.data()));#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}<html>
<head>
<title>Tutorial 1: Getting Started</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
</body>
</html>