javascript - 与 d3 事件绑定(bind)

Question

在 d3 中编写事件处理程序时，有没有办法使用 bind直接等效？我没有在文档中的任何地方看到bind 的实现或讨论。

目前我正在这样做:

graph = function () {
    var self = this;
    this.svg = d3.select('body').append('svg');
    this.svg.append('svg:rect')
        .style('fill', '#f00')
        .attr('width', 300)
        .attr('height', 300);
    this.svg.on('mousedown', function(){return self.mouseDown.call(this, self);})
}
graph.prototype.mouseDown = function (self) {
    /* 'self' is the instance of graph */
    alert(self.svg);
    /* 'this' is the event */
    alert(d3.mouse(this));
}
var g = new graph();

JSFiddle

这很好用。然而，在这里使用匿名函数来使用 call 似乎是一种不好的做法，因为 bind 本来能够在常规 DOM 元素上完成此操作(如果我没有使用d3 选择)。我更愿意使用 d3 选择而不是针对底层 DOM 元素(为了保持一致性，并且因为 this.svg 已经附加到 graph 对象)。

由于 d3 的 on 方法 appears to be the typical way to assign event listeners , 是否还有其他选项可以在此处传递数据？

Answer 1

这一切都源于 d3 依赖于 this 关键字指向 DOM 元素这一事实——使用 this 几乎就像传递给处理程序函数的另一个参数一样。这与 this 作为对类实例的引用的典型用法“冲突”。

因为 Function.prototype.bind() 只是一种显式设置函数调用的 this 关键字的方法，它不能解决您的问题。换句话说，如果您需要同时访问 DOM 元素和类实例，则必须设置一个辅助变量，如 self 以指向这两者之一。

至少部分原因是 d3 自己的类(例如 d3.svg.axis)不使用类声明的 prototype 方式，而是依赖于闭包(如描述 here )。因此，要么切换到那种类声明样式，要么必须按照示例中显示的方式继续进行。您的示例还有这个更惯用的变体，但它仍然与您所拥有的基本相同:

graph = function () {
    this.svg = d3.select('body').append('svg');
    this.svg.on('mousedown', this.mouseDownHandler())
}
graph.prototype.mouseDownHandler = function () {
    /* 'self' is the instance of graph */
    var self = this;
    return function(d, i) {
        /* 'this' is the DOM element */
        alert(d3.mouse(this));

        /* now you can work with both "self" and "this" */
    }
}
var g = new graph();