点击节点时在节点位置显示div失败，使用position、renderedPosition无效如何解决？

核心问题是你拿到的position和renderedPosition是Cytoscape画布内部的坐标，和页面元素的定位坐标体系不匹配，直接赋值自然不会生效，常见的错误场景和修复方法如下：

• 坐标体系适配错误：position是节点在画布原生逻辑坐标系下的坐标，不会随画布平移、缩放改变；renderedPosition是经过画布缩放、平移后的渲染层坐标，仅相对于Cytoscape容器的左上角。如果你要展示的div的定位上下文不是Cytoscape容器，直接用这两个值肯定对不上。
• 定位属性缺失：很多人只给div设置了top、left数值，忘了给div加position: absolute或者position: fixed属性，元素没有脱离文档流的话，top/left属性不会生效。
• 单位缺失：position和renderedPosition返回的是纯数值，赋值给元素样式的时候必须拼接px单位，直接传数值浏览器无法识别。
• 没有计算容器偏移：就算你用对了renderedPosition，也要额外加上Cytoscape容器本身在页面中的偏移距离，才能匹配页面元素的定位坐标。

你可以参考以下代码调整逻辑：

// 绑定节点点击事件
cy.on('tap', 'node', (event) => {
  const targetNode = event.target;
  // 取适配了画布缩放、平移的渲染坐标
  const nodeRenderPos = targetNode.renderedPosition();
  // 获取Cytoscape容器的页面位置信息
  const cyContainer = cy.container();
  const containerPos = cyContainer.getBoundingClientRect();
  
  // 计算div实际定位坐标，额外加的偏移量可自行调整避免遮挡节点
  const finalLeft = containerPos.left + nodeRenderPos.x + 15;
  const finalTop = containerPos.top + nodeRenderPos.y + 15;

  // 给目标div设置样式
  const showDiv = document.getElementById('你要展示的div的ID');
  showDiv.style.position = 'fixed';
  showDiv.style.left = `${finalLeft}px`;
  showDiv.style.top = `${finalTop}px`;
  showDiv.style.display = 'block';
})

如果你需要在拖动画布、缩放画布的时候div始终跟随节点，还要额外监听pan、zoom事件，触发时重新计算坐标更新div的位置即可。

内容的提问来源于stack exchange，提问作者laloune