drawing a line on linegraph on mouseover?

Question

I am building a line graph with D3.js. When the user mouses over the graph, I would like to draw a vertical line on the graph, highlight its intersection with the chart lines, a

Answer 1

I know this has already been marked as answered, but for future googlers for whom this shows up as a top result... A working example for a vertical line on mouseover can be found here: http://bl.ocks.org/WillTurman/4631136

Here's the relevant portion of the code for the vertical line:

  var vertical = d3.select(".chart")
        .append("div")
        .attr("class", "remove")
        .style("position", "absolute")
        .style("z-index", "19")
        .style("width", "1px")
        .style("height", "380px")
        .style("top", "10px")
        .style("bottom", "30px")
        .style("left", "0px")
        .style("background", "#fff");

  d3.select(".chart")
      .on("mousemove", function(){  
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px" )})
      .on("mouseover", function(){  
         mousex = d3.mouse(this);
         mousex = mousex[0] + 5;
         vertical.style("left", mousex + "px")});

Answer 2

This might help you to get a bit further (I have no experience with D3 at all):

1. For some reason your events are bound to the paths, not the base svg element. If you do d3.select(".air-quality").on(..) it seems to work as you would expect.