d3js工具提示在引导web上的位置不正确

Question

我一直在尝试实现d3中的树映射图。在我的空闲时间项目中使用js库，我很难正确定位工具提示。我想它应该是这里提到的，但有几个div，我想它是放错地方了。这是我正在使用的树形图，我尝试了这里的一些建议，但似乎没有一个能使它适合我的使用。

这是我的JSFIDLE：

.on("mousemove", function (d) {
        // console.log(d)
        tooltip.transition()
          .duration(300)
          .style("opacity", .98);
        tooltip.html(`<div class="tooltip-body" data-id=${d.data.name} >
          Symbol: ${d.data.name}<br/>
          Value: ${d.data.current_value} USD<br/>
          Change: ${d.data.pc}%<br/></div>`)
           .style("left", d3.mouse(this)[0] + "px")
           .style("top", d3.mouse(this)[1] + "px")
      })

Answer 1

问题在于坐标。更换d3。使用d3的鼠标。事件：

.on("mousemove", function (d) {
  ...     
  tooltip.html(`<div class="tooltip-body" data-id=${d.data.name} >
    Symbol: ${d.data.name}<br/>
    Value: ${d.data.current_value} USD<br/>
    Change: ${d.data.pc}%<br/></div>`)
    .style("left", d3.event.offsetX + "px")
    .style("top", d3.event.offsetY + "px")
 })