如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問(wèn)題

更新時(shí)間：2024年03月24日 10:33:05 作者：騎上我心愛(ài)的小摩托

這篇文章主要介紹了如何解決d3.event在v7版本無(wú)效影響zoom拖拽縮放問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

1.設(shè)置d3圖形的縮放配置

在d3.event.transform.x中，即提示

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'x')

此時(shí)可在zoom方法內(nèi)，使用匿名函數(shù)獲取當(dāng)前參數(shù)current

參數(shù)內(nèi)即含有所需的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圖形的鼠標(biāo)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')
   })

此時(shí)關(guān)于圖例內(nèi)的數(shù)據(jù)

需要通過(guò)current.target.__data__來(lái)獲取

而layerX則直接在匿名函數(shù)內(nèi)的current參數(shù)獲取
而非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(`數(shù)量：${data.value}`)
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue實(shí)現(xiàn)登錄功能
這篇文章主要介紹了vue實(shí)現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-12-12
關(guān)于vue.extend的使用及說(shuō)明
這篇文章主要介紹了關(guān)于vue.extend的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
vue實(shí)現(xiàn)導(dǎo)出word文檔的示例代碼
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)導(dǎo)出word文檔（包括圖片）,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-01-01
vue中拆分組件的實(shí)戰(zhàn)案例
最近在學(xué)vue,試著寫個(gè)單頁(yè)應(yīng)用,在寫組件,拆分組件時(shí)遇到一些困惑,下面這篇文章主要給大家介紹了關(guān)于vue中拆分組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-12-12
Nuxt3重點(diǎn)特性使用舉例問(wèn)題記錄
Nuxt3?使用?Vue.js?作為視圖引擎，Nuxt3?中提供了所有?Vue?3?功能，所以我們創(chuàng)建的Nuxt項(xiàng)目其實(shí)也是vue3項(xiàng)目，這篇文章主要介紹了Nuxt3重點(diǎn)特性使用舉例記錄,需要的朋友可以參考下
2022-12-12
vue項(xiàng)目中js文件使用vue的this實(shí)例說(shuō)明
這篇文章主要介紹了vue項(xiàng)目中js文件使用vue的this實(shí)例說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
使用Vite2+Vue3渲染Markdown文檔的方法實(shí)踐
本文主要介紹了Vite2+Vue3渲染Markdown文檔的方法實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的可以了解一下
2021-08-08
Vue使用watch同時(shí)監(jiān)聽(tīng)多個(gè)值的實(shí)現(xiàn)方法示例
這篇文章主要為大家介紹了Vue中使用watch同時(shí)監(jiān)聽(tīng)多個(gè)值的實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
vue實(shí)現(xiàn)輪播圖的多種方式
這篇文章給大家介紹了vue實(shí)現(xiàn)輪播圖的多種方式,文中給出了四種實(shí)現(xiàn)方式,并通過(guò)代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下
2024-02-02
vue內(nèi)點(diǎn)擊url下載文件的最佳解決方案分享
這篇文章主要給大家介紹了關(guān)于vue內(nèi)點(diǎn)擊url下載文件的最佳解決方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-02-02