Range selection improved

by paradite

HTML

<body>
  <script src="//d3js.org/d3.v3.js"></script>
</body>

CSS

.axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    .hidden {
      opacity: 0.3;
    }
    
    .extent {
      fill: #000;
      fill-opacity: .125;
      stroke: #fff;
    }
    
    rect.selection {
      cursor: move !important;
      -webkit-touch-callout: none !important;
      -webkit-user-select: none !important;
      -khtml-user-select: none !important;
      -moz-user-select: none !important;
      -ms-user-select: none !important;
      user-select: none !important;
      stroke: #545454;
      stroke-width: 2px;
      stroke-opacity: 1;
      fill: white;
      fill-opacity: 0.1;
    }

JavaScript

var margin = {
    top: 20,
    right: 50,
    bottom: 30,
    left: 50
  },
  width = 960 - margin.left - margin.right,
  height = 450 - 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");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");

var curPt = d3.select('body')
  .append('p')
  .html("Current point: ")
  .append('span')
  .attr('id', 'curPt');

var svg = d3.select('body').insert('svg', 'p')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
  .append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

svg.append('g')
  .attr('class', 'x axis')
  .attr('transform', 'translate(0,' + height + ')')
  .call(xAxis);

svg.append('g')
  .attr('class', 'y axis')
  .call(yAxis);
/**    
var brush = d3.svg.brush()
    .x(x)
    .y(y)
    .on("brush", function() {
        var e = brush.extent();
        svg.selectAll('circle').classed('hidden', function(d) {
            return e[0][0] > d[0] || d[0] > e[1][0]
                || e[0][1] > d[1] || d[1] > e[1][1];
            }
        );
    })
    .on("brushend", function() {
        if (brush.empty()) svg.selectAll('circle').classed('hidden', false);
    });
    
svg.call(brush);
**/


var selectionRect = {
  element: null,
  previousElement: null,
  currentY: 0,
  currentX: 0,
  originX: 0,
  originY: 0,
  setElement: function(ele) {
    this.previousElement = this.element;
    this.element = ele;
  },
  getNewAttributes: function() {
    var x = this.currentX < this.originX ? this.currentX : this.originX;
    var y = this.currentY < this.originY ? this.currentY : this.originY;
    var width = Math.abs(this.currentX - this.originX);
    var height = Math.abs(this.currentY - this.originY);
    return {
      x: x - margin.left, // take care of your...