javascript - Lasso and D3.js

Question

I thought i had a similar issues to this SO user here, but after swapping out the minified lasso library for the actual lasso code, I'm still not getting a working output.

My code is more or less the same as the example code on lasso's git hub (I've made the required changes for my set up), so theoretically i shouldn't be having any issues, right?

I just want to get the lasso itself working before appending my own styles and returning any data.

<script>

var data = [["Arsenal",-0.0032967741593940836, 0.30399753945657115],["Chelsea", 0.2752159801936051, -0.0389675484210763], ["Liverpool",-0.005096951348655329, 0.026678627680541075], ["Manchester City",-0.004715381791104284, -0.12338379196523988], ["Manchester United",0.06877966010653305, -0.0850615090351779], ["Tottenham",-0.3379518099485709, -0.09933664174939877]];

const colours = d3.scaleOrdinal()
    .domain(data)
    .range(["#F8B195", "#F67280", "#C06C84", "#6C5B7B", "#355C7D", "#2A363B"]);

var canvasW = 675;
var canvasH = 400;   
var w = 365;
var h = 365;
var xPadding = 30;
var yPadding = 20;
var padding = 10;

var xScale = d3.scaleLinear()
    .range([xPadding, w - padding])
    .domain([-1, 1]);

var yScale = d3.scaleLinear()
    .range([h - yPadding, padding])
    .domain([-1, 1]);

var svg = d3.select('body')
    .append("svg")
    .attr('width', canvasW)
    .attr('height', canvasH);

var lasso_start = function() {
    lasso.items()
        .attr("r",7) 
        .classed("not_possible",true)
        .classed("selected",false);
};

var lasso_draw = function() {

    lasso.possibleItems()
        .classed("not_possible",false)
        .classed("possible",true);

    lasso.notPossibleItems()
        .classed("not_possible",true)
        .classed("possible",false);
};

var lasso_end = function() {
    lasso.items()
        .classed("not_possible",false)
        .classed("possible",false);

    lasso.selectedItems()
        .classed("selected",true)
        .attr("r",7);

    lasso.notSelectedItems()
        .attr("r",3.5);

};

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("r", 7)
    .attr("cx", function(d) { return xScale(d[1]); })
    .attr("cy", function(d) { return yScale(d[2]); })
    .attr("fill", function(d) {
      var result = null;

      if (data.indexOf(d) >= 0) {
        result = colours(d);
      } else {
        result = "white";
      }
      return result;               
    });

var legend = svg.selectAll(".legend")
    .data(colours.domain())
    .enter()
    .append("g")
    .attr("class", "legend")
    .attr("transform", function(d, i) { return "translate(0," + i * 29 + ")"; });

legend.append("rect")
    .attr("x", canvasW - 184)
    .attr("y", 11)
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", colours);

legend.append("text")
    .attr("x", canvasW - 194)
    .attr("y", 20)
    .attr("dy", ".35em")
    .style("text-anchor", "end")
    .text(function(d) { return d[0];})


var lasso = d3.lasso()
    .closePathDistance(75) 
    .closePathSelect(true) 
    .area(svg)
    .items("circle") 
    .on("start",lasso_start) 
    .on("draw",lasso_draw) 
    .on("end",lasso_end); 

svg.call(lasso);

CSS

<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
@import url("https://fonts.googleapis.com/css?family=Lato:300");
text {
    font-family: "Open Sans Condensed";
}
.axis path {
    stroke: black;
}

.tick line {
    visibility: hidden;
}

.border {
    margin-top: 9px;
    margin-left: 29px;
    border: .5px solid black;
    width: 325px;
    height: 335px;
    position: absolute;
}

.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;
}

</style>

Answer 1

I never used d3.lasso before but looking at this bl.ock using d3 v4, looks like your code is missing a few minor things:

1. Area to be passed to d3 lasso is now done using targetArea

    var lasso = d3.lasso()
     .targetArea(svg)
   

2. Items passed to d3 lasso must be a d3 selection and not a string

   var circles = svg.selectAll("circle")...
   
   var lasso = d3.lasso()
    .items(circles) 
   

And of course, using the actual minified lasso code in a script tag, here's a snippet:

https://bl.ocks.org/shashank2104/f878d660bd9013faa6d48236b5fe9502/67d50a5c7a21c0adfa5ed66ce3dc725f0a45c8c2

Also, I've added some CSS to the selected circles just to differentiate when compared with others:

.selected {
   fill: steelblue;
}

Hope this helps.