我正在使用拖动事件来移动元素。为了移动元素,我必须先选择它。我在箭头函数中这样做:
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 中拖动事件中项目的句柄?
最佳答案
当调用 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
关于d3.js - 使用 v6 中的箭头功能在拖动事件中选择元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68144094/