How to make d3-lasso working on d3 forcedirected network?

Question

I've tried several different changes to make my lasso work, but I keep getting the following error.

Here's my lasso implementation as done by the author.

 var lasso = d3.lasso()
      .closePathSelect(true)
      .closePathDistance(100)
      .items(node)
      .targetArea(this.svg)
      .on("start", lasso_start)
      .on("draw", lasso_draw)
      .on("end", lasso_end);

    //self.svg.call(lasso);


    // Lasso functions
    var lasso_start = function () {
      lasso.items()
        .attr("r", 8) // 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", 10);

      // Reset the style of the not selected dots
      lasso.notSelectedItems()
        .attr("r", 8);

    };

    this.svg.call(lasso);

But whenever I run this, I always get the above error and I have no clue why.

I used the minified d3-lasso from here

StackBlitz

Answer 1

Looks like you are using variables before they are declared. Change the order so that variables (Lasso functions) are declared before use and it should be fine.

// Lasso functions
var lasso_start = function() {
  lasso.items()
    .attr("r", 8) // 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", 10);

  // Reset the style of the not selected dots
  lasso.notSelectedItems()
    .attr("r", 8);
};

// initialize lasso
var lasso = d3.lasso()
  .closePathSelect(true)
  .closePathDistance(100)
  .items(node)
  .targetArea(this.svg)
  .on("start", lasso_start)
  .on("draw", lasso_draw)
  .on("end", lasso_end);

this.svg.call(lasso);