0

Hi I am following this example code and I use it in v6 version: https://bl.ocks.org/larsenmtl/e3b8b7c2ca4787f77d78f58d41c3da91 everything works fine but at the end:

d3.select(this).select("text").text(y.invert(pos.y).toFixed(2));

I changed it to

 d3.select(event.currentTarget).select("text").text(y.invert(pos.y).toFixed(2));

the weird thing happened, the event.currentTarget point to the rect, not the g class, so it doesn't show the text, I tried everything I can do, but have no luck enter image description here

it should look like this enter image description here

This is such a pain for me, could any one please help me with this, many thanks!

Xiao H
  • 125
  • 3
  • 8
  • That `this` is not the same element to which the handler has been attached, which is indeed a rect. Just keep that `this` as it is, that is, don't change that line. – Gerardo Furtado Oct 30 '20 at 13:13
  • Hi thank you for your quick response, but I am using v6, select(this) doesn't work, or can you show me a piece of code of what you mean? – Xiao H Oct 30 '20 at 13:22
  • 2
    `select(this)` works just fine in v6. – Gerardo Furtado Oct 30 '20 at 13:37
  • I got this error: this.querySelector is not a function, does that mean I have problem in other places? – Xiao H Oct 30 '20 at 13:46
  • Yes, you're probably using an arrow function instead of a regular function - that makes that `this` is not the current node, but the `window` element. And the `window` doesn't have a `querySelector` attribute – Ruben Helsloot Oct 30 '20 at 15:02
  • I fixed it by changing both the mouseover event function and transform function from arrow function to normal function and problem fixed, doesn't know arrow function has this tricky side effect, thank you so much, you are my lifesaver! – Xiao H Oct 31 '20 at 00:04
  • @XiaoH please read this answer of mine regarding arrow functions: https://stackoverflow.com/a/45262284/5768908 – Gerardo Furtado Oct 31 '20 at 00:16
  • sure, will do, thank you! – Xiao H Oct 31 '20 at 00:49

0 Answers0