Getting hover-interaction and brushing to co-exist

Trying to get point hover-interaction and brushing to exist. I have found some existing precedence (bug #1604) for this being a weird problem, particular in relation to how D3's brush is implemented. Previous solutions have suggested drawing points on top and passing the event along to the brush, but this does not handle the case where the brush extent needs to be persistent (in the bigger picture, the scatterplot is linked to other components).

As implemented above, the brush draws fine and information can be recovered from points on hover. However, if the brush is started, dragged, or resized with the mouse starting on a point, strange behavior occurs (e.g. trying to translate an extent by clicking on a point will cause the extent to resize instead).

Here's what I've got: in brushstart() defined in D3.js (line 9192), there are two targets of interest: this (which is the element that brush is called on), and eventTarget (the actual element that was clicked). For the different operations (dragging, resizing, and "redrawing"), this should be the parent brush element (in this case, the svg element), and eventTarget should be the child element that was actually clicked (rect.extent for translating the extent, rect with datum for resizing, and rect.background for redrawing/canceling).

I can't seem to set the eventTarget property within brushstart() appropriately. Any ideas?

forked from yelper's block: Getting hover-interaction and brushing to co-exist

forked from larsenmtl's block: Getting hover-interaction and brushing to co-exist

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    .axis path,
    .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
    }
    
    .hidden {
        opacity: 0.3;
    }
    
    
    .extent {
        fill: #000;
        fill-opacity: .125;
        stroke: #fff;
    }
</style>
<body>
<script src="//d3js.org/d3.v3.js"></script>
<script>
    
var margin = {top: 20, right: 50, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 350 - margin.top - margin.bottom;
    
var x = d3.scale.linear()
    .range([0, width])
    .domain([0, 10]);
    
var y = d3.scale.linear()
    .range([height, 0])
    .domain([0, 10]);
    
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

svg.append('g') 
    .attr('class', 'points')
    .selectAll('circle')
    .data(data).enter()
  .append('circle')
    .attr('cx', function(d) { return x(d[0]); })
    .attr('cy', function(d) { return y(d[1]); })
    .attr('r', 10)
    .style('fill', 'steelblue')
    .on('mouseover', function(d) {
        curPt.html("[" + d[0] + ", " + d[1] + "]");
    })
    .on('mouseout', function(d) {
        curPt.html("");
    })
		.on('mousedown', function(d){
  		var e = brush.extent(),
          m = d3.mouse(svg.node()),
          p = [x.invert(m[0]), y.invert(m[1])];
       
      if ( brush.empty() || 
           (e[0][0] > d[0] || d[0] > e[1][0]
           || e[0][1] > d[1] || d[1] > e[1][1] )   
      ) {
        brush.extent([p,p]);
      } else {
        d3.select(this).classed('extent', true);
      }
    });

</script>

https://d3js.org/d3.v3.js