如何使D3-Lasso在D3强制定向网络上工作？

如何解决如何使D3-Lasso在D3强制定向网络上工作？

为了使套索工作，我尝试了几种不同的更改，但我不断收到以下错误。

这是我的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);

    //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);

      // 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);

但是，每当我运行此命令时，我总是会收到上述错误，并且不知道为什么。

我使用了here中缩小的d3-lasso

StackBlitz

解决方法

好像您在声明变量之前就使用它们。更改顺序，以便在使用前声明变量（套索函数），并且应该没问题。

// 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);

  // 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);