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

Question

d3.drag的文档指出拖动事件的DOM元素目标可用于this回调：

调度指定事件时，将使用与select相同的上下文和参数调用每个侦听器。在侦听器上：当前数据d和索引i，并且此上下文作为当前DOM元素。

但是我的回叫是一个对象实例，并this指向该对象。因此，我需要另一种访问通常传入的当前DOM元素的方法this。我该怎么做？

Answer 1

将第二个和第三个参数一起使用以获取this何时this不可用：

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

有关详细说明，请看下面我写的关于this箭头函数的文章。这个问题与您的不同，但解释是相同的。

这是一个基本的演示，尝试拖动一个圆圈并查看控制台：

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.stringifyD3选择，因为如果您尝试进行console.log D3选择，则堆栈片段会冻结。

通过箭头功能使用“ this”

D3.js中的大多数函数都接受匿名函数作为参数。常见的例子是.attr，.style，.text，.on和.data，但名单是不是这样大。

在这种情况下，将为按顺序传递的每个选定元素评估匿名函数：

1. 当前基准（d）
2. 当前索引（i）
3. 当前组（个nodes）
4. this 作为当前DOM元素。

基准，所述索引和所述当前组作为参数，在D3.js著名的第一，第二和第三参数（其参数被命名为传统上通过d，i并且p在D3
3.x版）。对于使用this，则不需要使用任何参数：

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

this当鼠标悬停在元素上时，将选择上面的代码。检查它是否在此提琴中正常工作：

箭头功能

作为新的ES6语法，与函数表达式相比，箭头函数的语法更短。但是，对于经常使用的D3程序员来说this，有一个陷阱：箭头函数不会创建自己的this上下文。这意味着，在箭头功能中，this其含义是从封闭上下文中获取的。

在某些情况下这可能很有用，但是对于习惯于this在D3中使用的编码器来说，这是一个问题。例如，使用上面小提琴中的相同示例，此操作将无效：

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

好吧，这不是一个大问题：可以在需要时简单地使用常规的老式函数表达式。但是，如果您想使用箭头函数编写所有代码怎么办？是否可以使用带有箭头功能的代码
并this在D3中正确使用？

第二和第三论点相结合

答案是 肯定的 ，因为this与相同nodes[i]。当它描述时，提示实际上在整个D3 API中都存在：

…以this作为当前DOM元素（nodes[i]）

解释很简单：因为nodes是DOM中的当前元素组，并且i是每个元素的索引，所以nodes[i]请引用当前DOM元素本身。即this。

因此，可以使用：

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