如何解决d3.event在v7版本无效影响zoom拖拽缩放问题
更新时间：2024年03月24日 10:33:05 作者：骑上我心爱的小摩托
这篇文章主要介绍了如何解决d3.event在v7版本无效影响zoom拖拽缩放问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
（福利推荐：【腾讯云】服务器最新限时优惠活动，云服务器1核2G仅99元/年、2核4G仅768元/3年，立即抢购>>>：9i0i.cn/qcloud）
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
近期由于代码内关于d3版本的更新，由原来的v3 v4更新值v7.0.0
导致原有关于d3的波点图内zoom方法的拖拽缩放、tooltip提示框问题开始报错，即d3.event数据废弃了
1.设置d3图形的缩放配置
在d3.event.transform.x中，即提示
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'x')
此时可在zoom方法内，使用匿名函数获取当前参数current
参数内即含有所需的x，y，k值
let zoom = d3.zoom().scaleExtent([0, 8]).on('zoom', function (current){
zoomed(current.transform)
})
....
let svg = d3
...
.call(zoom)
function zoomed(transform) {
svg.style('transition', 'none')
svg.attr('transform', `translate(${transform.x},${transform.y}) scale(${transform.k})`
)}
2.d3图形的鼠标tooltip配置事件
let node = svg
...
.on('mouseover', function (current) {
clearTimeout(that.timer)
that.timer = setTimeout(() => {
that.drawTooltip(current.target.__data__, current)
}, 100)
})
.on('mouseout', function (current) {
clearTimeout(that.timer)
that.toolTip.style('visibility', 'hidden')
})
此时关于图例内的数据
需要通过current.target.__data__来获取
- 而layerX则直接在匿名函数内的current参数获取
- 而非d3.event获取
drawTooltip(data, event) {
this.toolTip
.style('visibility', 'visible')
.style('left', `${event.layerX}px`)
.style('top', `${event.layerY}px`)
.text(`名称：${data.title}`)
.append('p')
.text(`类别：${data.type}`)
.append('p')
.text(`数量：${data.value}`)
}
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持程序员之家。
相关文章
这篇文章主要介绍了vue之Element-Ui输入框显示与隐藏方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
vue element el-form 多级嵌套验证的实现示例
本文主要介绍了vue element el-form 多级嵌套验证的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
在vue3中,?提供了一个?useAttrs?的方法它接收到的参数一?prop中可以接收到的数据是基本一样的如果我们想自已写一个组件,?把?elementPlus?中的期中一个组件封装一下,这篇文章主要介绍了vue3中的useAttrs和props的区别,需要的朋友可以参考下2023-09-09
vue.js与element-ui实现菜单树形结构的解决方法
本文通过实例给大家介绍了vue.js与element-ui实现菜单树形结构，非常不错，具有参考借鉴价值,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了Vue.use()的作用及原理解析，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
vue提倡的是在方法中只有对数据的处理，所以提供了事件修饰符用于DOM的事件处理，下面这篇文章主要给大家介绍了关于Vue自定义组件使用事件修饰符的相关资料,需要的朋友可以参考下2021-05-05
这篇文章主要介绍了vue-router权限控制(简单方式)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
前端启动出现报错提示vue-cli-service?serve的原因及解决办法
这篇文章主要给大家介绍了关于前端启动出现报错提示vue-cli-service?serve的原因及解决办法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下2023-11-11
这篇文章主要介绍是八种vue实现组建通信的方式，包括、props 父组件与子组件通信、$emit 子组件父组件传递、$emit与props结合 兄弟组件传值等等，想具体了解的朋友可以参考下面文章的具体内容2021-09-09
这篇文章主要为大家详细介绍了vue拖拽排序插件vuedraggable的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
最新评论