1

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")
      })
Lucas03
  • 2,267
  • 2
  • 32
  • 60

1 Answers1

1

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")
 })
Michael Rovinsky
  • 6,807
  • 7
  • 15
  • 30