Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Mona Jalal
Mona Jalal
4,302 Points

How can I make the circles red when I hover over them using fisheye/d3.js?

Please have a look at http://plnkr.co/edit/x2Ytobjks42oJrVYkiZa?p=preview and let me know how to correct the code at line 54?

Stuart Elmore
Stuart Elmore
84 Points

Here's my solution: http://plnkr.co/edit/GD9Wpg5z43gNN1WESPbn

Essentially you need to set the new fill colour when your mouse enters the circle (mouseover) and then reset it again when the mouse leaves the circle (mouseout) (or keep it the same / modify it as you wish).

To do this, you need to tell the circles to listen to mouseover and mouseout and then reference the functions to change the colours:

      var circles = svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .datum(function(d) {
          return {
            x: d.pages,
            y: d.books
          }
        })
        .attr("cx", function(d) {
          return d.x
        })
        .attr("cy", function(d) {
          return d.y
        })
        .attr("r", 10)
        .on('mouseover', handleMouseOver)
        .on('mouseout', handleMouseOut);

The handleMouseOver / handleMouseOut functions are declared above that code and look like this:

      var handleMouseOver = function(){
        d3.select(this).attr({
          fill: "red"
        });
      };

      var handleMouseOut = function(){
        d3.select(this).attr({
          fill: "black"
        });
      };

Inside the functions, the context of this is the circle that you're firing the event on. Hence; 

  d3.select(this).attr({
    fill: "red"
  });

Hope that helped, feel free to ask any further questions :)

1 Answer

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

I've never used this library before, but take a look at the docs for this, maybe it can help:

d3.js doc