Mousemove on layered canvases

This fiddle demonstrates that the mousemove event works on layered canvases provided the targeted canvas has the highest z-index. However, an issue prevents this behaviour in the d3 parcoords interface (as discussed here: https://stackoverflow.com/questions/44924217/multiple-canvas-layers-and-mousemove)

by sc28

HTML

<title>Brushing Minimal Example</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

<div id="example" class="parcoords" style="width:960px;height:100px;">
	<canvas id="marks" class="marks" style="position:absolute;left:0px;top:0px;z-index: 1; margin-top: 24px; margin-left: 0px; width: 962px; height: 166px;" width="1202.5" height="207.5"></canvas>
	<canvas id="foreground" class="foreground" style="position:absolute;left:0px;top:0px;z-index: 2; margin-top: 24px; margin-left: 0px; width: 962px; height: 166px;" width="1202.5" height="207.5"></canvas>
	<canvas id="brushed" class="brushed" style="position:absolute;left:0px;top:0px;z-index: 3; margin-top: 24px; margin-left: 0px; width: 962px; height: 166px;" width="1202.5" height="207.5"></canvas>
	<canvas id="highlight" class="highlight" style="position:absolute;left:0px;top:0px;z-index: 4; margin-top: 24px; margin-left: 0px; width: 962px; height: 166px;" width="1202.5" height="207.5"></canvas>
	<canvas id="clickable_colors" class="clickable_colors" style="position:absolute;left:0px;top:0px;z-index: 5; margin-top: 24px; margin-left: 0px; width: 962px; height: 166px;" width="1202.5" height="207.5"></canvas>	
	
</div>
<div>"The squares above are in a layered canvas with a high z-index"</div>
<div id="status">"Hex of polylines should appear here on mousemove"</div>
<div id="examplediv" class="parcoords_test" style="width:960px;height:100px;">
	<canvas id="examplecanvas" class="excanvclass" width="200" height="60"></canvas>
</div>
<div>"The squares above are in a simple canvas"</div>
<div id="examplestatus">"Hex of squares should appear here on mousemove"</div>

<script>


function getPolylineID_simple() {

	function findPos(obj) {
		var curleft = 0, curtop = 0;
		if (obj.offsetParent) {
			do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
			} while (obj = obj.offsetParent);
			return { x: curleft, y: curtop...