d3.drag的文档指出拖动事件的DOM元素目标可用于this回调:
this
调度指定事件时,将使用与select相同的上下文和参数调用每个侦听器。在侦听器上:当前数据d和索引i,并且此上下文作为当前DOM元素。
但是我的回叫是一个对象实例,并this指向该对象。因此,我需要另一种访问通常传入的当前DOM元素的方法this。我该怎么做?
将第二个和第三个参数一起使用以获取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选择,则堆栈片段会冻结。
JSON.stringify
通过箭头功能使用“ this”
D3.js中的大多数函数都接受匿名函数作为参数。常见的例子是.attr,.style,.text,.on和.data,但名单是不是这样大。
.attr
.style
.text
.on
.data
在这种情况下,将为按顺序传递的每个选定元素评估匿名函数:
d
i
nodes
基准,所述索引和所述当前组作为参数,在D3.js著名的第一,第二和第三参数(其参数被命名为传统上通过d,i并且p在D3 3.x版)。对于使用this,则不需要使用任何参数:
p
.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中都存在:
nodes[i]
…以this作为当前DOM元素(nodes[i])
解释很简单:因为nodes是DOM中的当前元素组,并且i是每个元素的索引,所以nodes[i]请引用当前DOM元素本身。即this。
因此,可以使用:
.on("mouseover", (d, i, nodes) => { d3.select(nodes[i]); });