Question

这是我的代码的摘要

class X {
    constructor() {
        ...
    }

    function1(...) {
        ...
        self = this;
        this.xyz.append('g')
            .attr("id", this.id)
            .data([{
                        "x": this.x,
                        "y": this.y
                    }
                ])
            .attr("transform", "translate(" + this.x + "," + this.y + ")")
            .on("click", self.function2(this.id));
    }

    function2(...){
        ...
    }
}

因此，当调用函数1时，我保持一个监听器onclick来运行function2，但是在onclick期间从不调用function2，但是在第一个实例中调用function1。你能不能让我知道我的错误

Answer 1

.on的第二个参数是一个函数，而是调用函数并将其返回值传递给.on。此外，由于this.id在function2的范围内，我不确定你是否需要传递它。

如果确实需要传递变量，请将其包装在anon函数中：

所以它变成了：

class X {
    constructor() {
        ...
    }

    function1(...) {
        ...
        self = this;

        var someValue = 6;

        this.xyz.append('g')
            .attr("id", this.id)
            .data([{
                        "x": this.x,
                        "y": this.y
                    }
                ])
            .attr("transform", "translate(" + this.x + "," + this.y + ")")
            .on("click", function(){
               self.function2(someValue)
             });
    }

    function2(theValue){
        console.log(theValue); // 6
    }
}

正在运行代码：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    <svg></svg>
    <script>
    class X {

      constructor() {
      }

      function1() {
        
        var self = this,
            someValue = 6;

        d3.select('svg').append('rect')
          .attr("width", 500)
          .attr("height", 500)
          .attr("fill", "steelblue")
          .on("click", function() {
            self.function2(someValue)
          });
      }

      function2(theValue) {
        console.log(theValue); // 6
      }
    }
    
    var y = new X();
    y.function1();
    
  </script>
  </body>

</html>

D3如何在课堂内调用事件上的函数？

1 个答案: