如何解決d3.event在v7版本無效影響zoom拖拽縮放問題
更新時間：2024年03月24日 10:33:05 作者：騎上我心愛的小摩托
這篇文章主要介紹了如何解決d3.event在v7版本無效影響zoom拖拽縮放問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
近期由于代碼內(nèi)關(guān)于d3版本的更新，由原來的v3 v4更新值v7.0.0
導(dǎo)致原有關(guān)于d3的波點圖內(nèi)zoom方法的拖拽縮放、tooltip提示框問題開始報錯，即d3.event數(shù)據(jù)廢棄了
1.設(shè)置d3圖形的縮放配置
在d3.event.transform.x中，即提示
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'x')
此時可在zoom方法內(nèi)，使用匿名函數(shù)獲取當前參數(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圖形的鼠標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')
})
此時關(guān)于圖例內(nèi)的數(shù)據(jù)
需要通過current.target.__data__來獲取
- 而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é)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue實現(xiàn)登錄功能的步驟，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了關(guān)于vue.extend的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)導(dǎo)出word文檔（包括圖片）,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
最近在學(xué)vue,試著寫個單頁應(yīng)用,在寫組件,拆分組件時遇到一些困惑,下面這篇文章主要給大家介紹了關(guān)于vue中拆分組件的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-12-12
Nuxt3?使用?Vue.js?作為視圖引擎，Nuxt3?中提供了所有?Vue?3?功能，所以我們創(chuàng)建的Nuxt項目其實也是vue3項目，這篇文章主要介紹了Nuxt3重點特性使用舉例記錄,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue項目中js文件使用vue的this實例說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
本文主要介紹了Vite2+Vue3渲染Markdown文檔的方法實踐，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的可以了解一下2021-08-08
Vue使用watch同時監(jiān)聽多個值的實現(xiàn)方法示例
這篇文章主要為大家介紹了Vue中使用watch同時監(jiān)聽多個值的實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章給大家介紹了vue實現(xiàn)輪播圖的多種方式,文中給出了四種實現(xiàn)方式,并通過代碼示例給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作有一定的幫助,感興趣的朋友可以參考下2024-02-02
這篇文章主要給大家介紹了關(guān)于vue內(nèi)點擊url下載文件的最佳解決方案,文中通過實例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02