Question

我正在使用D3拖放链接，如下所示：

.call(d3.drag()
  .on("start", linkDragStart)
  .on("drag", linkDragging)
  .on("end", linkDragEnd));

现在，我从方法内部删除了此函数，并将其作为单独的方法放置。所以我将上面的代码更改为：

.call(d3.drag()
  .on("start", linkDragStart)
  .on("drag", linkDragging)
  .on("end", this.linkDragEnd));

该方法正在被调用。问题是，当在linkDragEnd方法内部使用this关键字时，它被引用到在其上调用该方法的d3路径。有解决方法吗？

Answer 1

有两种可能的解决方案。首先，如注释中所建议的那样，是使用bind，即，与其直接使用方法this.linkDragEnd，而应使用其绑定版本：

.call(d3.drag()
                .on("start", linkDragStart)
                .on("drag", linkDragging)
                .on("end", this.linkDragEnd.bind(this));

另一种可能性是，当您定位现代JavaScript（至少为ES6）或使用某些编译器时（如标签所建议的TypeScript就足够了）。然后，您可以将此方法定义为属性，其属性不是箭头方法，而是属性，其值为箭头函数：

linkDragEnd = (/* arguments here */) => {
    /* function body here */
}

由于箭头函数的行为不同，this可以用作没有显式绑定的回调，只要它们引用创建它们的对象即可。

无法从d3.call（）中调用组件中的方法

1 个答案: