Accepted answer

Here's a fork of your code with the working vertical line:

Relevant code:

var vertical ='svg.state.'+selectedState)
  .attr("class", "remove").style({stroke:'#000', 'stroke-width': '1px', 'pointer-events': 'none'});'svg.state.'+selectedState).on("mousemove", function(){  
   mousex = d3.mouse(this);"display", null).attr("d", function () {
   var d = "M" + mousex[0] + "," + (size.h-padding.bottom);
   d += " " + mousex[0] + "," +;
   return d;
}).on("mouseout", function(){  
   mousex = d3.mouse(this);
   mousex = mousex[0] + 5;"display", "none")});
  1. Got rid of HTML element div and replaced it with a path. As per my knowledge/experience, CSS positions mess up when the browser is resized or when the container (svg's parent)'s dimensions change. The truth is: I find this to be a simpler method and trust me, it works great if you have clip paths.
  2. One important thing missing in your code was that the vertical line with a general class "remove" was being attached to every svg and there was no distinguishing between them. Here's what I am talking about:'svg.state.'+selectedState)

In your case, the mousemove event resulted in showing up all vertical lines because it was being added to svgHook which in your case was just two: #main-chart-hook and #small-multiples-hook. I'm adding mouseover events for every svg individually with reference to it's vertical line.

  1. Please don't mind but I changed a lot of code (added s, containers for paths. Take a look at the code and let me know if that works out fine for you. This is how I'm in practice when it comes to SVG coding.

Relevant code:

var main = state.append('g').classed('main', true);

var overlay_rect = main.append('rect')
  .attr('class', 'overlay')
  .attr('width', size.w-padding.left)
  .attr('height', (
  .attr('transform', 'translate('+padding.left+', ' +')')
  .style({'fill': 'none', 'stroke': 'none', 'pointer-events': 'all'})

var pathGroup = main.append('g').classed('paths', true);

var paths = pathGroup.selectAll("path")

Hope this helps and let me know if any part of the code isn't understandable :)

Related Query

More Query from same tag