如何使 d3-lasso 在 d3 forcedirected 网络上工作？

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

但是每当我运行它时，我总是得到上述错误，我不知道为什么。

我从 这里使用了缩小的d3-lasso

闪电战

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