如何使 d3-lasso 在 d3 力定向网络上工作？

Question

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

这是作者完成的我的 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)
        .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);

但是每当我运行这个时候，我总是得到上面的错误，我不知道为什么。

我使用了 here

的缩小版 d3-lasso

StackBlitz

Answer 1

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

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

如何使 d3-lasso 在 d3 力定向网络上工作？

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

javascript

d3.js

d3.js-lasso