Typescript/D3 v4 - d3.drag().on ("end"中的 this 上下文，this.dragended)

Question

我正在使用 D3 库在维恩图中移动项目。当我停止拖动时，我想确定项目在图表中的位置。

item.call(d3.drag()
    .on("start", this.dragstarted)
    .on("drag", this.dragged)
    .on("end", this.dragended)
);

这些是我在拖动开始、进行和结束时调用的函数。

dragended(d: TCMemberScenario, i: number) {
    d3.select(this).classed("active", false);
    d.calculateRoles();
    this.save();
}

这是拖动结束时调用的函数。我更新了图中的一些东西，然后我想调用保存方法。这是类中的另一个方法。但是，this 变量引用的是 D3 对象而不是类的实例。 所以我得到一个“Uncaught TypeError: Cannot read property 'save' of undefined”

如何从 dragended 方法中调用我类的另一个方法？

Answer 1

要保留对“this”的引用，请使用如下箭头函数:

item.call(d3.drag()
    .on("start", (d, i) => this.dragstarted(d,i))
    .on("drag", (d, i) => this.dragged(d, i))
    .on("end", (d, i) => this.dragended(d, i))
);