cytoscapejs获取被点击节点位置，并在该节点附近进行双击展示弹窗

获取节点位置

event.target.renderedPosition()

其中event是cytoscapejs监听事件中自带的参数

实现

HTML

 <div id="cy" style="width: 100%; height: 550px; position: relative"><div id="pop-window">进入详情页</div></div>

CSS

 #pop-window {position: absolute;background: pink;z-index: 99999;display: none;cursor: pointer;padding: 5px;border-radius: 10px;background: rgba(0, 0, 0, 0.8);color: white;}

JS

下面的cy是cytoscapejs的实例

// 双击事件
let timer = null;
function doubleClick(cy,event) {if (timer === null) {timer = window.setTimeout(() => {timer = null;}, 300);} else {window.clearTimeout(timer);timer = null;// 双击要执行的操作。。。。。。console.log(event.target.renderedPosition());document.querySelector('#pop-window').style.top = event.target.renderedPosition().y + 'px';document.querySelector('#pop-window').style.left = event.target.renderedPosition().x + 'px';document.querySelector('#pop-window').style.display = 'block';id = event.target.id();// 点击其他地方取消显示cy.once("click", () => {document.querySelector('#pop-window').style.display = 'none';});}
}let id = null
document.querySelector('#pop-window').onclick = (e) => {console.log("id", id);document.querySelector('#pop-window').style.display = 'none';alert(id)
}
// 监听节点点击事件
cy.on("tap", function (event) {doubleClick(cy,event)
});