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

Question

我一直在尝试在我的空闲时间项目中从 d3.js lib 实现树形图，但我很难正确定位工具提示。我认为它应该像here 中提到的那样，但是还有一些 div，我猜它放错了位置。这是我正在使用的treemap，我尝试了here 的一些建议，但似乎没有一个适合我的使用。

这是我的JSFiddle：

.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.mouse 替换为d3.event：

.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")
 })