[Solved]-D3: How do you highlight a range of dates on D3 a line chart?-d3.js

The main issue is putting the rectangles behind the lines. Given a date you can calculate its position on the corresponding axis like this - say you want to put a bar starting on 04/19/2013 and ending on 04/21/2013.

    //here x is already the x axis time scale you have defined in your code
    var left = x(new Date("Apr 19 2013"));
    var right = x(new Date("Apr 22 2013")); //one more day
    var wid = right - left;
    svg.append("rect")
      .attr("x", left)
      .attr("width", wid)
      .attr("height", height)

Now you can also add a style class to fill or stroke or set opacity etc. Adding click events should be easy but since there is no z-index for SVG which only relies on DOM order you can see if you can insert the rectangles before you insert the chart lines.