d3.js:取代d3.mouse的d3.pointer

这篇博客介绍了在d3.js V6.0中,由于d3.mouse和d3.event已被移除,作者在学习过程中如何找到并使用替代函数d3.pointer。内容包括前言、新旧版本的对比以及如何在新版本中使用d3.pointer的示例。

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

前言

  • 今天在学习如何使用d3.js的事件处理函数过程中,发现d3.mouse和d3.event在浏览器报错不是函数,于是前往官方文档,发现这里两个函数已经在d3V6.0中删除了!
  • 于是,我在往上查了好久,没有查到替代的函数,只能回头再次翻阅文档,终于被我找到了!

对比

  • 在V5.0和更早的版本中,sel.on(type,callback)的callback有三个参数:

    d:绑定当前元素的数据点;
    index:当前数据点在选择集中的索引;
    nodes:当前数据点所在的选择集;

  • 而在最新的V6.0版本中,callback只剩下两个参数:

    event: 当前事件对象;
    d:绑定当前元素的数据点;

  • 因此,6.0不再保留d3.event,取而代之的是将其变为callback函数的参数之一,而取代d3.mouse的函数为d3.pointer(event,target)

使用示例

  • v5.0 or earlier:
    sel.on('click',function(d,index,nodes){
    	console.log(d3.mouse(node));
    })
    
  • v6.0 or later:
    sel.on('click',function(event,d){
    	console.log(d3.pointer(event,node));
    })
    
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值