# D3 "mouseover" troubleshooting

**URL:** <https://forum.freecodecamp.org/t/d3-mouseover-troubleshooting/479168>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [September 25, 2021, 6:53am UTC](https://forum.freecodecamp.org/t/d3-mouseover-troubleshooting/479168 "2021-09-25T06:53:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![sssmsm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sssmsm/32/233329_2.png) [@sssmsm](https://forum.freecodecamp.org/u/sssmsm)\
**Post date:** [September 25, 2021, 6:53am UTC](https://forum.freecodecamp.org/t/d3-mouseover-troubleshooting/479168/1 "2021-09-25T06:53:13Z")

</div>

I’m working on the first of the projects for the Data Visualization course, and I’m trying to get the “mouseover” part of the graph to work, but so far no good.

I’m just trying to get the blue bars to turn orange when hovered over, then back to blue when moved away, not using CSS since I’m going to have to eventually get the data text to show up too (which I have no idea how to do but I suppose that’s for later…)

Here is the pen, any help appreciated:

[https://codepen.io/sssmsm/pen/PojBvgK](https://codepen.io/sssmsm/pen/PojBvgK)

---

<div class="post-metadata">

**Author:** ![jeremy.a.gray](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremy.a.gray/32/181458_2.png) [@jeremy.a.gray](https://forum.freecodecamp.org/u/jeremy.a.gray)\
**Post date:** [September 25, 2021, 4:12pm UTC](https://forum.freecodecamp.org/t/d3-mouseover-troubleshooting/479168/2 "2021-09-25T16:12:25Z")

</div>

This code

```auto
    svg.selectAll("rect")
       .data(dataset)
       .enter()
       .append("rect")
       ...
       .append("title")
       .text((d) => d)
       .on("mouseover", handleMouseOver)
       .on("mouseout", handleMouseOut);

```

attaches the mouseover/mouseout events to the `title` element, not the `rect` element like you need. You can’t mouseover the `title` elements since `d3` doesn’t place them under the pointer and moves them when the pointer moves, so those events never fire.  
In your handler functions, passing an object to `.attr()` does not appear to be supported; just use a regular call to it like `.attr('fill', 'blue')`.

I noticed in your code that you call these handlers with `(d, i)` and while irrelevant for this issue, is the old style of calling these functions. Since you’re using D3v7, they are called with `(event, datum)` which is the firing event object and the current datum; the index is not available automatically like it used to be. Just be aware when you use these functions to create your tooltip so that you can find the data you wish to display.

---

<div class="post-metadata">

**Author:** ![sssmsm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sssmsm/32/233329_2.png) [@sssmsm](https://forum.freecodecamp.org/u/sssmsm)\
**Post date:** [September 26, 2021, 5:07am UTC](https://forum.freecodecamp.org/t/d3-mouseover-troubleshooting/479168/3 "2021-09-26T05:07:49Z")

</div>

Thank you for the reply! During the FCC course, we never learned how to do tooltips outside of the simple “.title” one, so I’m struggling with this.

Because of that, I’m not sure how to do the handler functions. I’ve tried a bunch of trial-and-error versions (and looked up other ones but they’re way beyond me), and none of them do anything. How do I format the functions to work with the “mouseover/mouseout” sections?

---

<div class="post-metadata">

**Author:** ![jeremy.a.gray](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremy.a.gray/32/181458_2.png) [@jeremy.a.gray](https://forum.freecodecamp.org/u/jeremy.a.gray)\
**Post date:** [September 27, 2021, 12:50am UTC](https://forum.freecodecamp.org/t/d3-mouseover-troubleshooting/479168/4 "2021-09-27T00:50:48Z")

</div>

Your handlers were actually fine, except for providing the correct arguments to `.attr()`. If you attach them to the `rect` and not the `title` and fix the arguments, they work, so now you just need the code for the tooltips (and you could actually remove the titles if you like).

The tooltip problem is a common issue. If you look at the test output, it hints strongly (maybe not so strongly on the bar graph) at using a `div` with the appropriate attributes attached. There are two common approaches I see here: use the D3 tooltips package or append an invisible `div` and use the mouse event functions to make that `div` visible or invisible and set the correct attributes and move it, etc. Just don’t use any transitions as they tend to cause the tests to fail because the tooltip isn’t immediately visible.

On the bars for instance, you would want to append a `div` and when the mouse enters a bar, it sets the `div` to visible (multiple style/attr methods for that) and give it a `data-date` attribute equal to the bar’s date. When the mouse leaves the bar, set the `div` back to invisible.

---

<div class="post-metadata">

**Author:** ![sssmsm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sssmsm/32/233329_2.png) [@sssmsm](https://forum.freecodecamp.org/u/sssmsm)\
**Post date:** [September 27, 2021, 11:34am UTC](https://forum.freecodecamp.org/t/d3-mouseover-troubleshooting/479168/5 "2021-09-27T11:34:37Z")

</div>

Thank you so much for your help. I really appreciate it.

I got the tooltip to show up and display html, but how do I access the date/amount data into the function?

When I try to use the “d” variable in the “.html” section of “handleMouseMove” it either displays “[object mouse event]” if I use d, or “undefined” if I use d[0] or d[1], or just a blank if I use d.value or d[1/0].value.

---

<div class="post-metadata">

**Author:** ![jeremy.a.gray](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jeremy.a.gray/32/181458_2.png) [@jeremy.a.gray](https://forum.freecodecamp.org/u/jeremy.a.gray)\
**Post date:** [September 27, 2021, 10:45pm UTC](https://forum.freecodecamp.org/t/d3-mouseover-troubleshooting/479168/6 "2021-09-27T22:45:47Z")

</div>

D3 has tons of articles and documentation and most of it is outdated except for the stuff at the D3 github repo and a few other places. You’re using D3v7, which calls event functions with signatures like `function(event, datum) {...}`. Old versions of D3 (4 and back maybe) used a different signature like `function(datum, index) {...}`. The problem is that lots of the documentation on the web is not up to date.

So when D3 calls your `handleMouseOver` function, it will call it with the `event` in the first argument and the current `datum` in the second even if your function definition says `handleMouseOver(d, i)` (JS cares not what you call your variables…). Your GDP and date data will be attached to the second argument to your handler function. You can add a `console.log(d)` and `console.log(i)` in your `handleMouseOver` to see it in action.

---

<div class="post-metadata">

**Author:** ![sssmsm](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/sssmsm/32/233329_2.png) [@sssmsm](https://forum.freecodecamp.org/u/sssmsm)\
**Post date:** [September 28, 2021, 12:42am UTC](https://forum.freecodecamp.org/t/d3-mouseover-troubleshooting/479168/7 "2021-09-28T00:42:52Z")

</div>

Thanks so much! I know you mentioned that in the first reply, but I didn’t really understand what that meant until now XD

Would’ve never figured that out with your help!

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [March 29, 2022, 12:43pm UTC](https://forum.freecodecamp.org/t/d3-mouseover-troubleshooting/479168/8 "2022-03-29T12:43:24Z")

</div>

Closed on March 29, 2022, 12:43pm UTC

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.