当`this`不可用时，从拖动回调中检索DOM目标 [英] Retrieve DOM target from drag callback when `this` is not available

问题描述

d3.drag 的文档拖动事件的DOM元素目标将在this中提供给回调:

The documentation for d3.drag states the DOM element target of the drag event will be available in this to the callback:

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

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元素的方式.我该怎么办?

But my call back is an object instance and this points to that object. So I need another way of accessing the current DOM element that is normally passed in this. How can I do it?

推荐答案

在this不可用时，将第二个和第三个参数一起使用以获取this:

Use the second and the third arguments together to get this when this is not available:

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

有关详细说明，请看下面我写的关于箭头功能中处理this的文章.这个问题与您的不同，但是解释是相同的.

For a detailed explanation, have a look at the article below that I wrote to deal with this in arrow functions. The issue is different from yours, but the explanation is the same.

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

Here is a basic demo, try to drag a circle and look at the console:

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:我在D3选择上使用JSON.stringify，因为如果尝试控制台，堆栈片段会冻结.记录D3选择.

PS: I'm using JSON.stringify on the D3 selection because Stack snippets freeze if you try to console.log a D3 selection.

通过箭头功能使用"this"

D3.js中的大多数函数都接受匿名函数作为参数.常见的例子是.attr，.style，.text，.on和.data，但是列表比这大得多.

Most of functions in D3.js accept an anonymous function as an argument. The common examples are .attr, .style, .text, .on and .data, but the list is way bigger than that.

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

In such cases, the anonymous function is evaluated for each selected element, in order, being passed:

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

1. The current datum (d)
2. The current index (i)
3. The current group (nodes)
4. this as the current DOM element.

原点，索引和当前组作为参数传递，这是D3.js中著名的第一，第二和第三参数(在D3 v3中，其参数传统上分别命名为d，i和p). X).但是，使用this时，无需使用任何参数:

The datum, the index and the current group are passed as arguments, the famous first, second and third argument in D3.js (whose parameters are traditionally named d, i and p in D3 v3.x). For using this, however, one doesn’t need to use any argument:

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

当鼠标悬停在元素上时，以上代码将选择this.选中它是否可以在这种提琴中正常工作: https://jsfiddle.net/y5fwgopx/

The above code will select this when the mouse is over the element. Check it working in this fiddle: https://jsfiddle.net/y5fwgopx/

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

As a new ES6 syntax, an arrow function has a shorter syntax when compared to function expression. However, for a D3 programmer who uses this constantly, there is a pitfall: an arrow function doesn’t create its own this context. That means that, in an arrow function, this has its original meaning from the enclosing context.

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

This can be useful in several circumstances, but it is a problem for a coder accustomed to use this in D3. For instance, using the same example in the fiddle above, this will not work:

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

如果您对此表示怀疑，请参见以下小提琴: https://jsfiddle.net/tfxLsv9u/

If you doubt it, here is the fiddle: https://jsfiddle.net/tfxLsv9u/

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

Well, that’s not a big problem: one can simply use a regular, old fashioned function expression when needed. But what if you want to write all your code using arrow functions? Is it possible to have a code with arrow functions and still properly use this in D3?

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

The answer is yes, because this is the same of nodes[i]. The hint is actually present all over the D3 API, when it describes this:

...以this作为当前DOM元素(nodes[i])

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

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

The explanation is simple: since nodes is the current group of elements in the DOM and i is the index of each element, nodes[i] refer to the current DOM element itself. That is, this.

因此，一个人可以使用:

Therefore, one can use:

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

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

这篇关于当`this`不可用时，从拖动回调中检索DOM目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！