一起使用第二个和第三个参数来获取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 选择，堆栈片段会冻结。

使用带有箭头函数的“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但是，对于 using ，不需要使用任何参数：

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

上面的代码将this在鼠标悬停在元素上时进行选择。检查它是否在这个小提琴中工作：https : //jsfiddle.net/y5fwgopx/

箭头函数

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

这在多种情况下很有用，但对于习惯于this在 D3 中使用的编码员来说，这是一个问题。例如，使用上面小提琴中的相同示例，这将不起作用：

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

如果你怀疑，这里是小提琴：https : //jsfiddle.net/tfxLsv9u/

嗯，这不是什么大问题：可以在需要时简单地使用常规的老式函数表达式。但是如果您想使用箭头函数编写所有代码怎么办？是否有可能有一个带有箭头函数的代码并且仍然可以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]);
});

这是相应的小提琴：https : //jsfiddle.net/2p2ux38s/