栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

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

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

将第二个和第三个参数一起使用以获取

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.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
,则不需要使用任何参数:

.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]);});


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/575093.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号