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)
});

效果