JSFiddle - React, Tailwind, and code Playground

by Shashank D

HTML

<svg width="300" height="200">
  <rect width="100%" height="100%" fill="none" stroke="gray"></rect>
</svg>
<script src="https://d3js.org/d3.v4.js"></script>

JavaScript

var svg = d3.select("svg")
var g = svg.append("g")
var brush = d3.brush()

var brushGroup = g.append("g").classed('brush', true)
    .call(brush)

g.select("g.brush").on("mouseup.brush", function() { 
    	console.log('mouseup on overlay')
    });		
brushGroup.selectAll(".overlay")
    .on("mousedown", function() { 
    	console.log('mousedown on overlay')
    })
    .on("click", function() { 
    	console.log('click on overlay')
    })
    .on("mouseup.brush", function() { 
    	console.log('mouseup on overlay')
    });		
brushGroup.selectAll(".selection")
    .on("mousedown", () => console.log('mousedown on selection'))
    .on("click", () => console.log('click on selection'))
    .on("mouseup", () => console.log('mouseup on selection'))