D3 Examples - d3.lasso example

xxxxxxxxxx
 
<html>
<head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="./d3-lasso.min.js"></script>
    <style>
        circle {
            fill-opacity: 0.5;
        }
​
        .lasso path {
            stroke: rgb(80,80,80);
            stroke-width:2px;
        }
​
        .lasso .drawn {
            fill-opacity:.05 ;
        }
​
        .lasso .loop_close {
            fill:none;
            stroke-dasharray: 4,4;
        }
​
        .lasso .origin {
            fill:#3399FF;
            fill-opacity:.5;
        }
​
        .not_possible {
            fill: rgb(200,200,200);
        }
​
        .possible {
            fill: #EC888C;
        }
​
        .selected {
            fill: steelblue;
        }
    </style>
</head>
<body>
    <script>
        var data = new Array(100).fill(null).map(m=>[Math.random(),Math.random()]);
        var w = 960;
        var h = 500;
        var r = 3.5;
​
        var svg = d3.select("body").append("svg")
            .attr("width",w)
            .attr("height",h);
        
        var circles = svg.selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("cx",d=>d[0]*w)
            .attr("cy",d=>d[1]*h)
            .attr("r",r);
        
        // Lasso functions
        var lasso_start = function() {
            lasso.items()
                .attr("r",3.5) // reset size
                .classed("not_possible",true)
                .classed("selected",false);
        };
​
        var lasso_draw = function() {
        
            // Style the possible dots
            lasso.possibleItems()
                .classed("not_possible",false)
                .classed("possible",true);
​
            // Style the not possible dot
            lasso.notPossibleItems()
                .classed("not_possible",true)
                .classed("possible",false);
        };
​
        var lasso_end = function() {
            // Reset the color of all dots
            lasso.items()
                .classed("not_possible",false)
                .classed("possible",false);
​
            // Style the selected dots
            lasso.selectedItems()
                .classed("selected",true)
                .attr("r",7);
​
            // Reset the style of the not selected dots
            lasso.notSelectedItems()
                .attr("r",3.5);
​
        };
        
        var lasso = d3.lasso()
            .closePathSelect(true)
            .closePathDistance(100)
            .items(circles)
            .targetArea(svg)
            .on("start",lasso_start)
            .on("draw",lasso_draw)
            .on("end",lasso_end);
        
        svg.call(lasso);
    </script>
</body>
</html>
    