如何解决d3.event在v7版本无效影响zoom拖拽缩放问题

 更新时间:2024年03月24日 10:33:05   作者:骑上我心爱的小摩托  
这篇文章主要介绍了如何解决d3.event在v7版本无效影响zoom拖拽缩放问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

近期由于代码内关于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}`)
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3使用Element-plus的el-pagination分页组件时无法显示中文

    vue3使用Element-plus的el-pagination分页组件时无法显示中文

    本文主要介绍了vue3使用Element-plus的el-pagination分页组件时无法显示中文,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-12-12
  • vue 获取视频时长的实例代码

    vue 获取视频时长的实例代码

    这篇文章主要介绍了vue 获取视频时长的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • nuxt.js写项目时增加错误提示页面操作

    nuxt.js写项目时增加错误提示页面操作

    这篇文章主要介绍了nuxt.js写项目时增加错误提示页面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue如何解决每次发版都要强刷清除浏览器缓存问题

    Vue如何解决每次发版都要强刷清除浏览器缓存问题

    这篇文章主要介绍了Vue如何解决每次发版都要强刷清除浏览器缓存问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue 中插槽的使用总结

    Vue 中插槽的使用总结

    这篇文章主要向大家分享的是Vue 中插槽的使用总结,包括内容有默认插槽、具名插槽、作用域插槽等内容,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-04-04
  • vue通过过滤器实现数据格式化

    vue通过过滤器实现数据格式化

    这篇文章主要介绍了vue通过过滤器实现数据格式化的方法,文中讲解非常细致,帮助大家更好的理解和学习,感兴趣的朋友可以了解下
    2020-07-07
  • vue配置代理服务器proxy 多种方法示例详解

    vue配置代理服务器proxy 多种方法示例详解

    这篇文章主要介绍了vue配置代理服务器proxy 多种方法,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • VUE实现Studio管理后台之鼠标拖放改变窗口大小

    VUE实现Studio管理后台之鼠标拖放改变窗口大小

    这篇文章主要介绍了VUE实现Studio管理后台之鼠标拖放改变窗口大小 的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的工作或学习具有一定的参考价值,需要的朋友可以参考下
    2020-03-03
  • vue.js动态修改background-image问题

    vue.js动态修改background-image问题

    这篇文章主要介绍了vue.js动态修改background-image问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue中实现权限管理详解

    Vue中实现权限管理详解

    这篇文章主要介绍了Vue中实现权限管理详解,权限是对特定资源的访问许可,所谓权限控制,也就是确保用户只能访问到被分配的资源,而前端权限归根结底是请求的发起权,请求的发起可能有下面两种形式触发,需要的朋友可以参考下
    2023-08-08

最新评论