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

Question

我一直在尝试在我的空闲时间项目中从 d3.js 库实现树状图，但我很难正确定位工具提示。我认为它应该如前所述 here, but with a few more divs I guess it is misplaced. This is the treemap I am using, I tried some suggestions from here 但 none 似乎适合我的使用。

这是我的 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")
 })

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

d3js tooltip is positioned incorrectly on bootstrap web

javascript

tooltip

d3.js

twitter-bootstrap