D3 help on mouseover

in the d3 course, I’m working on the ‘Climate Change Burden of Disease Visualization’.
I need to create a mouseover effect, but can’t get it right.
Is there a preview of the completed code somewhere?
link to the course: https://www.codecademy.com/courses/learn-d3/projects/d3-visualization

The code not working:

let divSelection =
d3.select(’#viz’)
.selectAll(‘div’)
.data(climate_daly_data)
.enter()
.append(‘div’)
.attr(‘class’, ‘bar’)
.style(‘width’, function(d) {return d.deaths*8 + ‘px’;})
.on(‘mouseover’, (d,i) => {toggleClass(d.(i+1), true);}
;

Thanks,
Willem

1 Like

It could be because you are missing a closing bracket…
.on(‘mouseover’, (d,i) => {toggleClass(d.(i+1), true);}**)**

1 Like

Thanks louwding,
Forgotten, indeed. :blush:
But now I have:
.on(‘mouseover’, (d,i) => {toggleClass(d.i+1, true)})
And still not working :frowning:
Some more help would be welcome.
Thanks in advance,
Willem

Hi! I have the same problem. Do you resolved it?
I tried with

.on(‘mouseover’, (d,i) => {toggleClass(i+1, true)})

but without success

Hi Gambindrieto,
Funny, your code (replace d.1 + 1 with i + 1) works for me. At least, I see a mouseover effect.
So far I have not yet discovered why the d should be left out.
Cheers,
Willem

I am still having problems. I have tried divSelection.on(“mouseover”, (d,i) => {
toggleClass(i+1, true);
});
but without success. No effect.

Probably you only hovered over the list elements. Hover over the chart and you will see that the respective bars and list elements are highlighted. Only after adding the next task, adding the event listener to listSelection, you will see the effect when you hover over the text.
Add the event listener at the end of your previously working chain.

divSelection
    .data(climate_daly_data)
    .enter()
  .append("div")
    .attr("class", "bar")
    .style("width", function (d) {
      return d.deaths * 8 + 'px';
    })
    .on("mouseover", function(d,i){
      i=i+1;
      toggleClass(i, true);
    })
    .on("mouseout", function (d, i) {
      i=i+1;
      toggleClass(i, false);
    })
    ;