D3 - 无法让弹出窗口出现在光标 xy 坐标处

Question

我试图让节点在单击时显示相邻的弹出窗口。这是关于我所在位置的代码笔： https://codepen.io/SavanaPope/pen/abLdmbz?editors=1000

我已经非常接近了，弹出窗口当前显示在左上角，并且正在接受点击 x/y 数据。它只是没有获得正确的光标位置 - 我不确定它当前是如何获得像素数据的。

我认为这个问题与 clicknode 函数有关：

function clicknode(nodes) {
  const[x, y] = d3.pointer(event);
  tooltip.style("left", (x)+"px")
         .style("top", (y)+"px")
         .transition().duration(200).style("opacity", 0.9)

  loadTooltipContent(nodes);
}

但我无法弄清楚我的（可能）格式错误在哪里。

如果您对如何解决这个问题有任何想法，我将不胜感激。

Answer 1

对于D3 V7，改写clicknode如下：

function clicknode(event, nodes) {
  tooltip
    .style("left", `${event.layerX}px`)
    .style("top", `${event.layerY}px`);
}

D3 - 无法让弹出窗口出现在光标 xy 坐标处

D3 - Can't get popover to appear at cursor xy coordinate

javascript

d3.js

cursor-position