Question

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?

Answer 1

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.