JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<div id='myDiv'></div>

CSS

.extent{
    fill: #CCC;
    opacity: 0.50;
    stroke: black;
}

.pink {
    fill: red;
    opacity: 0.50;
}

JavaScript

var selector = d3.svg.brush()
.on("brushstart", function() {
    d3.selectAll(".pink").remove();
});

var extent = selector.extent();

var x = d3.scale.linear()
    .range([0,500])
    .domain([0,500]);

var y = d3.scale.linear()
    .range([0,500])
    .domain([0,500]);

d3.select('#myDiv')
    .append('svg')
    .attr('id','mySVG')
    .attr('height',500)
    .attr('width',500)

.append('svg:g')
    .call(selector.x(x).y(y).on('brushend',bindSelect))
    //.on('click',function(){alert('hi mom!')})

function bindSelect(){
    var e = selector.extent();
    
    d3.select('.extent')
        .style('fill','pink')
        .on('click.select',null)
    
    d3.select('#mySVG')
        .append('rect')
        .attr("class", "pink extent")
        .attr('x',e[0][0])
        .attr('y',e[0][1])
        .attr('width',e[1][0] - e[0][0])
        .attr('height',e[1][1] - e[0][1])
        .on('click',function(){alert('hi mom!')})
}