问题描述
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:
但是我的回叫是一个对象实例,而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:
- 当前基准(
d
) - 当前索引(
i
) - 当前组(
nodes
) -
this
作为当前DOM元素.
- The current datum (
d
) - The current index (
i
) - The current group (
nodes
) 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:
解释很简单:由于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目标的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!