javascript - 当 `this` 不可用时从拖动回调中检索 DOM 目标

Question

d3.drag 的文档说明拖动事件的 DOM 元素目标将在回调的 this 中可用:

When a specified event is dispatched, each listener will be invoked with the same context and arguments as selection.on listeners: the current datum d and index i, with the this context as the current DOM element.

但是我的回调是一个对象实例，this 指向那个对象。所以我需要另一种方法来访问通常在 this 中传递的当前 DOM 元素。我该怎么做？

Answer 1

同时使用第二个和第三个参数得到this什么时候this不可用:

d3.drag().on(typename, function(d, i, n) {
  //here, 'this' is simply n[i]
})

有关详细说明，请看下面我写的处理this的文章在箭头函数中。问题和你的不一样，但是解释是一样的。

这里是一个基本的demo，试着拖一个圈，看看控制台:

var data = d3.range(5)
var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 100);
var circle = svg.selectAll(null)
  .data(data)
  .enter()
  .append("circle")
  .attr("cy", 50)
  .attr("cx", function(d) {
    return 50 + 50 * d
  })
  .attr("r", 10)
  .attr("fill", "tan")
  .attr("stroke", "black")
  .call(d3.drag()
    .on("start", function(d, i, n) {
      console.log(JSON.stringify(n[i]))
    }))

<script src="https://d3js.org/d3.v4.min.js"></script>

PS:我正在使用 JSON.stringify在 D3 选择上，因为如果您尝试 console.log D3 选择，Stack 片段会卡住。

---

将“this”与箭头函数结合使用

D3.js 中的大多数函数都接受匿名函数作为参数。常见的例子是 .attr , .style , .text , .on和 .data ，但列表远不止于此。

在这种情况下，匿名函数会按顺序为传递的每个选定元素求值:

1. 当前数据(d)
2. 当前索引(i)
3. 当前组(nodes)
4. this作为当前 DOM 元素。

数据、索引和当前组作为参数传递，即 D3.js 中著名的第一、第二和第三个参数(在 D3 v3 中，其参数传统上命名为 d、i 和 p。 X)。使用 this , 但是，不需要使用任何参数:

.on("mouseover", function(){
    d3.select(this);
});

上面的代码会选择this当鼠标悬停在元素上时。检查它在这个 fiddle 中的工作情况:https://jsfiddle.net/y5fwgopx/

箭头函数

作为一种新的 ES6 语法，与函数表达式相比，箭头函数具有更短的语法。但是，对于使用 this 的 D3 程序员通常，有一个陷阱:箭头函数不会创建自己的 this语境。这意味着，在箭头函数中，this从封闭的上下文中具有其原始含义。

这在多种情况下很有用，但对于习惯使用 this 的编码人员来说这是个问题。在 D3。例如，在上面的 fiddle 中使用相同的例子，这是行不通的:

.on("mouseover", ()=>{
    d3.select(this);
});

如果你怀疑，这里是 fiddle :https://jsfiddle.net/tfxLsv9u/

嗯，这不是什么大问题:需要时可以简单地使用常规的老式函数表达式。但是，如果您想使用箭头函数编写所有代码怎么办？是否可以使用带有箭头函数的代码 and 仍然正确使用 this在 D3 中？

第二个和第三个参数合并

答案是是，因为this与nodes[i]相同.当它描述这个时，提示实际上存在于整个 D3 API 中:

...with this as the current DOM element (nodes[i])

解释很简单:因为nodes是 DOM 中的当前元素组，i是每个元素的索引，nodes[i]引用当前 DOM 元素本身。即 this .

因此，可以使用:

.on("mouseover", (d, i, nodes) => {
    d3.select(nodes[i]);
});

这是相应的 fiddle :https://jsfiddle.net/2p2ux38s/