How To Make D3-lasso Working On D3 Forcedirected Network?

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()

Solution 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 functionsvar 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 lassovar 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);