var states = [
    { x : 43, y : 67, label : "first" },
    { x : 340, y : 150, label : "second" },
    { x : 300, y : 350, label : "third" },
    { x : 300, y : 350, label : "fourth" },
    { x : 50, y : 270, label : "fifth" },
    { x : 90, y : 400, label : "last" }
]

window.svg = d3.select("body")
.append("svg")
.attr("width", "960px")
.attr("height", "500px");

var selectionRect;

svg.selectAll( ".state")
.data( states)
.enter()
.append( "circle")
    .attr({
        class   : 'state',
        r       : 40,
        cx      : function( state) {
            return state.x;
        },
        cy      : function( state) {
            return state.y;
        }
    })
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
    .on("mouseout", function(){d3.select(this).style("fill", "white");});
;    

svg
.on( "mousedown", function() {
    var p = d3.mouse(this);
    svg.append( "rect")
    .attr({
        rx      : 6,
        ry      : 6,
        class   : "selection",
        x       : p[0],
        y       : p[1],
        width   : 0,
        height  : 0
    })
})
.on( "mousemove", function() {
    var s = svg.select( "rect.selection");

    if( !s.empty()) {
        var p = d3.mouse( this),

            d = {
                x       : parseInt( s.attr( "x"), 10),
                y       : parseInt( s.attr( "y"), 10),
                width   : parseInt( s.attr( "width"), 10),
                height  : parseInt( s.attr( "height"), 10)
            },
            move = {
                x : p[0] - d.x,
                y : p[1] - d.y
            }
        ;

        if( move.x < 1 || (move.x*2<d.width)) {
            d.x = p[0];
            d.width -= move.x;
        } else {
            d.width = move.x;       
        }

        if( move.y < 1 || (move.y*2<d.height)) {
            d.y = p[1];
            d.height -= move.y;
        } else {
            d.height = move.y;       
        }
       
        s.attr(d);
      selectionRect = d;
    }
})
.on("mouseup", function() {
    svg.select(".selection").remove();
  console.log(selectionRect);
});