d3_Tooltips positioning using d3.select(this)

I’m using d3.js v.6. I have HTML div tooltips:

<div id="tooltip"></div>

appear on the hovering event according this code:

g_points.on("mouseover", function (d, i) {
            d3.select(this).style("fill", "black");
            d3.select("#place").text("Place: " + i.place);
            d3.select("#tooltip")
              .style("left", d3.select(this).attr("cx") + "px")
              .style("top", d3.select(this).attr("cy") + "px")})

I need to slightly shift positioning of #tooltip. I’ve already tested these options which didn’t work:

// .style("left", d3.event.pageX + 20 + "px")
// .style("left", d3.event.pageY - 80 + "px")

and

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

Answer

Try this code (should work with V6):

g_points.on("mouseover", function (e, d, i) {
  d3.select(this).style("fill", "black");
  d3.select("#place").text("Place: " + i.place);
  d3.select("#tooltip")
    .style("left", `${e.layerX}px`)
    .style("top", `${e.layerX}px`);
});

Advertisement

Answer