Accepted answer

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;
      .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.

Related Query

More Query from same tag