d3.select(this)不能用箭头函数

本文深入探讨D3.js中的数据绑定技术,重点讲解如何通过典型数据绑定片段实现DOM元素与数据的动态关联,包括元素的添加、更新与删除过程,并解析了在使用D3.select(this)时this关键字的作用域问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

d3中典型的数据绑定片段

    const items = svg.selectAll('g')
                    .data(gdfs,(d)=> d.name);

    const enter = items.enter().append('g');
    //console.log(enter);
    //没有update()函数了,添加删除后,全部更新
    enter.merge(items)
        .attr('class',(d)=> d.name)
        .each(function(d) {
            const g = d3.select(this);
            console.log('g',g);
            //do some with g;
        });

    items.exit().remove();
}

对g元素如果需要进一步绑定数据进行操作,则调用each 传入匿名函数。 里面使用d3.select(this) ,这个d3 选择集,指向each对应的dom元素。

在这里,要注意this的问题。如果使用es6的箭头函数() =>{} ,会报错,必须使用传统的funcion(d){}

区别在这里,箭头函数不绑定this  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

 

不绑定this

在箭头函数出现之前,每个新定义的函数都有它自己的 this

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this

 

但是d3这里,显然是依赖局部的this的,用箭头函数,是找上一层的this,会报错。

 

 

——总之,用d3.select(this)的地方,就用传统的function就好了。反正也不是很多。

 

转载于:https://www.cnblogs.com/xuanmanstein/p/9938379.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值