d3.js - 使用 v6 中的箭头功能在拖动事件中选择元素

Question

我正在使用拖动事件来移动元素。为了移动元素，我必须先选择它。我在箭头函数中这样做:

const drag = d3.drag()
 .on('start', (e, d) => this.dragstarted(e, d))
 .on('drag', (e, d) => this.dragged(e, d))
 .on('end', (e, d) => this.dragended(e, d))

我要选择当前元素

  dragged(event:any, d:any) {
   console.log(d3.select(event.currentTarget))
  }

这是行不通的。它似乎只有在我使用非箭头函数时才有效:

const _this = this;
...
.on('drag', function (e, d) { _this.dragged(e, d, this) })
...
dragged(event:any, d:any, el:any) {
   console.log(d3.select(el))
}

版本5传递了可用于选择的元素的节点和索引:

dragged(d, i, nodes) {
    d3.select(nodes[i])
}

有没有办法在箭头函数中选择 svg 元素以获取 V6 中拖动事件中项目的句柄？

Answer 1

当调用 D3 拖动处理程序时，this 与 event.sourceEvent.target 相同，因此:

.on('drag', function(e, d) { onDrag(this, d); })

将与以下工作方式相同:

.on('drag', (e, d) => onDrag(e.sourceEvent.target, d))

请注意，该代码对 V6/V7 有效。对于 V5 或更早版本，使用 d3.event.sourceEvent.target