score:1

Accepted answer

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

Relevant code:

var vertical = d3.select(svgHook).select('svg.state.'+selectedState)
  .append("path")
  .attr("class", "remove").style({stroke:'#000', 'stroke-width': '1px', 'pointer-events': 'none'});

d3.select(svgHook).select('svg.state.'+selectedState).on("mousemove", function(){  
   mousex = d3.mouse(this);
   vertical.style("display", null).attr("d", function () {
   var d = "M" + mousex[0] + "," + (size.h-padding.bottom);
   d += " " + mousex[0] + "," + padding.top;
   return d;
  })
}).on("mouseout", function(){  
   mousex = d3.mouse(this);
   mousex = mousex[0] + 5;
   vertical.style("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:

d3.select(svgHook).select('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', (size.h-padding.bottom-padding.top))
  .attr('transform', 'translate('+padding.left+', ' + padding.top+')')
  .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