d3js 工具提示在引导程序 Web 上的位置不正确 [英] d3js tooltip is positioned incorrectly on bootstrap web

问题描述

我一直在尝试在我的空闲时间项目中从 d3.js 库实现树状图，但我很难正确定位工具提示.我认为它应该如此处所述，但还有一些div 我猜它放错了地方.这是我正在使用的 treemap，我尝试了 这里 但似乎没有一个适合我的使用.

这是我的 JSFiddle:

.on("mousemove", function (d) {//控制台日志(d)tooltip.transition().duration(300).style(不透明度", .98);tooltip.html(`<div class="tooltip-body" data-id=${d.data.name} >符号:${d.data.name}
价值:${d.data.current_value} 美元
更改:${d.data.pc}%

`).style("left", d3.mouse(this)[0] + "px").style("top", d3.mouse(this)[1] + "px")})

解决方案

问题在于坐标.将 d3.mouse 替换为 d3.event:

.on("mousemove", function (d) {...tooltip.html(`<div class="tooltip-body" data-id=${d.data.name} >符号:${d.data.name}
价值:${d.data.current_value} 美元
更改:${d.data.pc}%

`).style("left", d3.event.offsetX + "px").style("top", d3.event.offsetY + "px")})

I have been trying to implement treemap graph from d3.js lib on my free time project and I struggle to position the tooltip correctly. I assume it's should be as mentioned 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 but none seem to make it work for my usage.

Here is my 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")
      })

解决方案

The problem is with the coordinates. Replace d3.mouse with 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 工具提示在引导程序 Web 上的位置不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！