如何解決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)文章
vue3使用Element-plus的el-pagination分頁組件時無法顯示中文
本文主要介紹了vue3使用Element-plus的el-pagination分頁組件時無法顯示中文,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習或者工作具有一定的參考學(xué)習價值,需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2023-12-12
這篇文章主要介紹了vue 獲取視頻時長的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了nuxt.js寫項目時增加錯誤提示頁面操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了Vue如何解決每次發(fā)版都要強刷清除瀏覽器緩存問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要向大家分享的是Vue?中插槽的使用總結(jié)，包括內(nèi)容有默認插槽、具名插槽、作用域插槽等內(nèi)容，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
vue通過過濾器實現(xiàn)數(shù)據(jù)格式化
這篇文章主要介紹了vue通過過濾器實現(xiàn)數(shù)據(jù)格式化的方法，文中講解非常細致，幫助大家更好的理解和學(xué)習，感興趣的朋友可以了解下2020-07-07
這篇文章主要介紹了vue配置代理服務(wù)器proxy 多種方法,本文結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
VUE實現(xiàn)Studio管理后臺之鼠標拖放改變窗口大小
這篇文章主要介紹了VUE實現(xiàn)Studio管理后臺之鼠標拖放改變窗口大小 的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的工作或?qū)W習具有一定的參考價值,需要的朋友可以參考下2020-03-03
vue.js動態(tài)修改background-image問題
這篇文章主要介紹了vue.js動態(tài)修改background-image問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue中實現(xiàn)權(quán)限管理詳解,權(quán)限是對特定資源的訪問許可，所謂權(quán)限控制，也就是確保用戶只能訪問到被分配的資源,而前端權(quán)限歸根結(jié)底是請求的發(fā)起權(quán)，請求的發(fā)起可能有下面兩種形式觸發(fā),需要的朋友可以參考下2023-08-08