CODEWITHSUNDEEP
javascriptd3.js
user_78361084
user_78361084

Reputation: 3898

D3...get a circle to appear on mouseover and dissapear on mouseout

I have a line chart. When the user mouses over a point on that line, I'd like to display a circle (see this)

I am not using nvd3, but just d3. I have:

svg.selectAll(".dot")
      .data(data)
      .enter().append("circle")
      .attr("r", 1)
      .attr("cx", function(d) { return x(d.number); })
      .attr("cy", function(d) { return y(d.people); })
      .style("fill", "white").style("stroke","black")
      .style("display", "none")
      .on('mouseover', function() {
        d3.select(this).style("display","inline");
  })
      .on('mouseout', function() {
        d3.select(this).style("display", "none");
      });

I initially set the display of the circle to "none", and then to visible when the user hovers over it with their mouse. I then hide it again when they mouseout. However, the circle isn't appearing when I mouseover. What am I doing wrong?

Upvotes: 2

Views: 5468

Answers (1)

minikomi
minikomi

Reputation: 8503

If the circle is set to display none, there is nothing there to catch the event in the first place. Try to use another element as the trigger for the circle.

Upvotes: 1

Related Questions