Source: LinkSelection.js

/**
 * Function for the Selection of Edges.
 * The Function initializes a mousedown, mousemove, mouseup, mousout Event on the svg.
 * @event onmousedown Creates an Rect for Selection on the svg
 * @event onmousemove Extends the Rect while moving the mouse on the svg. Compares the coordinates of the Rect with the
 * Coordinates of the Links. All links which lie inisde the Rect are taken and marked red.
 * @event onmouseup Finishes the drawing/extending of the Rect and returns all links which are inside the Rect to
 * userSelectedLinks in main.js
 * @event onmouseout Ends the drawing of the Rect
 * @param {Object} svg The SVg in which the graph gets drawn
 * @param {Array} link All links which are generated by d3 [Array of Objects]
 */

function LinkSelection(svg, link) {

    var selectedLinks = []; // Array with the selected links of the force-layout

    svg.on( "mousedown", function() {

        var p = d3.mouse( this);

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

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

                var rectSize = {
                        x       : parseInt( s.attr( "x"), 10),
                        y       : parseInt( s.attr( "y"), 10),
                        width   : parseInt( s.attr( "width"), 10),
                        height  : parseInt( s.attr( "height"), 10)
                    };

                var move = {

                        x : p[0] - rectSize.x,
                        y : p[1] - rectSize.y
                    };

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

                if( move.y < 1 || (move.y*2<rectSize.height)) {
                    rectSize.y = p[1];
                    rectSize.height -= move.y;
                } else {
                    rectSize.height = move.y;
                }

                s.attr(rectSize);

                // deselect all temporary selected state objects
                selectedLinks = [];
                link.classed("linkSelected",false);
                link.classed("link",true);


                d3.selectAll("line").each( function() {
                    var x1 = d3.select(this).attr("x1");
                    var x2 = d3.select(this).attr("x2");
                    var y1 = d3.select(this).attr("y1");
                    var y2 = d3.select(this).attr("y2");

                    if(
                        !d3.select(this).classed("linkSelected") &&
                        // link inside selection frame
                        x1>=rectSize.x && x2<=rectSize.x+rectSize.width &&
                        y1>=rectSize.y && y2<=rectSize.y+rectSize.height
                    ) {
                        d3.select(this)
                            .classed( "linkSelected", true)
                            .classed( "link", false);

                    } // If the x1 and y2 are the bigger value
                    else if(
                        !d3.select(this).classed("linkSelected") &&
                        // link inside selection frame
                        x2>=rectSize.x && x1<=rectSize.x+rectSize.width &&
                        y2>=rectSize.y && y1<=rectSize.y+rectSize.height
                    ){
                        d3.select(this)
                            .classed( "linkSelected", true)
                            .classed( "link", false);
                    }


                });
            }
        })
        .on( "mouseup", function() {
            // remove selection frame
            svg.selectAll( "rect.selector").remove();

            // Return Values (Selection ended)
            d3.selectAll("line").each( function() {
                if(d3.select(this).classed("linkSelected")){
                    selectedLinks.push(this);
                }
            });
            userSelectedLinks = selectedLinks; // Return it into Main
        })
        .on( "mouseout", function() {
            if( d3.event.relatedTarget !== null && d3.event.relatedTarget.tagName=='HTML') {
                // remove selection frame
                svg.selectAll( "rect.selector").remove();


            }
        });


}

/**
 * Getter for the selected links
 * @returns {Array} Array of all selected links in a svg
 */
function getSelectedLinks(){
    return selectedLinks;
}