d3_Tooltips positioning using d3.select(this)

Question

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

Does it answer your question? https://stackoverflow.com/questions/67240931/d3js-tooltip-is-positioned-incorrectly-on-bootstrap-web/67242045#67242045 — Michael Rovinsky, Apr 26 '21 at 17:21
offsetX - Uncaught TypeError: can't access property "offsetX", d3.event is undefined layerX - the same error — Dmitry, Apr 26 '21 at 18:04
So you're probably using D3 V6. Pass event as a parameter. Here is an explanation: https://stackoverflow.com/questions/67208402/cannot-get-d3-onmouseover-to-work/67212211#67212211 — Michael Rovinsky, Apr 26 '21 at 18:48
Yes, yes, I'm using v.6. I've just added additional lines of my code into my question. Could you please tell me what event should I input and where. It would be even better if you would post an answer with example to my case. Thx — Dmitry, Apr 27 '21 at 08:43

score 1 · Accepted Answer · answered Apr 27 '21 at 10:16

1

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`);
});

answered Apr 27 '21 at 10:16

Michael Rovinsky

6,807
7
15
30

1

Thank you, it works now. Could you pls give me link to information about this issue, coz I'm still can't understand why do I need to use three params in function - (e, d, i)‍‍♂️ – Dmitry Apr 27 '21 at 10:59
The first parameter is event, the second is data. The third is probably index, I don't know why you need it.. You can take `place` from data: `d3.select("#place").text("Place: " + d.place);` – Michael Rovinsky Apr 27 '21 at 11:03
1

Ok, btw, in my case it even works with `function (e, d)` – Dmitry Apr 27 '21 at 11:14
1

Found some info about this issue here, block "Event management": https://observablehq.com/@d3/d3v6-migration-guide – Dmitry Apr 27 '21 at 11:23

d3_Tooltips positioning using d3.select(this)

1 Answers1