如何解决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}`)
}

总结

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

相关文章

  • vue如何获取光标位置

    vue如何获取光标位置

    这篇文章主要介绍了vue获取光标位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 一文搞懂Vue中computed和watch的区别

    一文搞懂Vue中computed和watch的区别

    这篇文章主要和大家详细介绍一下Vue中computed和watch的使用与区别,文中通过示例为大家进行了详细讲解,对Vue感兴趣的同学,可以学习一下
    2022-11-11
  • Vue3安装dataV报错问题解决方案

    Vue3安装dataV报错问题解决方案

    这篇文章主要给大家介绍了关于Vue3安装dataV报错问题解决方案的相关资料,dataV用于大屏展示,个人觉得比echarts简单很多,需要的朋友可以参考下
    2023-06-06
  • vue缓存的keepalive页面刷新数据的方法

    vue缓存的keepalive页面刷新数据的方法

    这篇文章主要介绍了vue缓存的keepalive页面刷新数据的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Vue中路由传参的实用方式 分享

    Vue中路由传参的实用方式 分享

    这篇文章主要为大家详细介绍了VUE项目中路由之间的传值方式,文中的示例代码讲解详细,涉及到的方法也都是开发时常用的,希望对大家有多帮助
    2023-06-06
  • npm install报错缺少python问题及解决

    npm install报错缺少python问题及解决

    这篇文章主要介绍了npm install报错缺少python问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • Vue新玩具VueUse的具体用法

    Vue新玩具VueUse的具体用法

    VueUse 是一个基于 Composition API 的实用函数集合。本文就详细的介绍了VueUse的具体用法,具有一定的参考价值,感兴趣的可以了解一下
    2021-11-11
  • 一文搞懂Vue里的过渡和动画

    一文搞懂Vue里的过渡和动画

    在Vue中,过渡和动画是一种用于在组件之间添加平滑过渡效果和动画效果的高级用法,Vue提供了一些内置的过渡和动画功能,同时也支持自定义过渡和动画效果,本文就给大家介绍一些Vue中过渡和动画的高级用法,需要的朋友可以参考下
    2023-06-06
  • vue打包后dist文件在本地启动运行的步骤

    vue打包后dist文件在本地启动运行的步骤

    这篇文章主要给大家介绍了关于vue打包后dist文件在本地启动运行的简单步骤,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考价值,需要的朋友可以参考下
    2023-09-09
  • Vue后台中优雅书写状态标签的方法实例

    Vue后台中优雅书写状态标签的方法实例

    在Vue中,我们可以非常便捷地通过标签实现状态的保存,这篇文章主要给大家介绍了关于Vue后台中如何优雅的书写状态标签的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08

最新评论