前言
- 今天在学习如何使用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)); })