摘要:然后有個需求就是當(dāng)節(jié)點縮放之后,不能隨著整體進(jìn)行縮放保持原來大小,這么處理會讓放大效果看的清楚一點實現(xiàn)方案整體縮放的同時對其中的節(jié)點再做多帶帶的縮放變幻處理,以抵消掉整體縮放帶來的放大效果,從而視覺看上去沒有被放大。
需求
d3.zoom() 來在整個group(g)元素上做縮放操作,這本來沒什么。
然后有個需求就是當(dāng)節(jié)點縮放>100%之后,不能隨著整體進(jìn)行縮放(保持原來大小,這么處理會讓放大效果看的清楚一點)
整體縮放的同時對其中的節(jié)點再做多帶帶的縮放變幻處理,以抵消掉整體縮放帶來的放大效果,從而視覺看上去沒有被放大。
主要遇到的問題坐標(biāo)位置的處理,縮放會引起平移translate和縮放scale值的變化
svg元素縮放和普通html 元素縮放不一樣
后續(xù)在拖拽的時候 需要再處理坐標(biāo)位置
方案問題其實這并不是什么好的解決方案,只是對于這個需求(講道理一般縮放都整體縮放就可以了),基于現(xiàn)在的布局方式最容易嘗試解決。
帶來的弊端就是
整體放大(在g.container做放大處理) 對單個節(jié)點反向縮放 需要比較多的反向計算,鏈路放大變粗則通過設(shè)置實際stroke-width變細(xì)來抵消。
svg transform知識點
縮放之后 計算實際位置的坐標(biāo)問題(getCTM())
參考get screen position of D3 Nodes after transform?
svg元素上的transform
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/81506.html
摘要:另一種就是不縮放,對等問題單獨引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實際開發(fā)中把融入到現(xiàn)有的移動端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了,我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過移動端頁面開發(fā)的同學(xué)都或多或少的了解過使用rem進(jìn)行移動端頁面適配的方案以及使用vw的方案,(沒了解過的同學(xué)可以參見大漠老師的這兩篇文章 使用Flexible實現(xiàn)手淘H5頁面的終端適配和再...
摘要:另一種就是不縮放,對等問題單獨引入處理方案。彩蛋部分相信大多數(shù)同學(xué)也是有想法在實際開發(fā)中把融入到現(xiàn)有的移動端適配方案中的。 前言 2018年最后的法定假期都已經(jīng)結(jié)束了,我相信大部分正在進(jìn)行或曾經(jīng)進(jìn)行過移動端頁面開發(fā)的同學(xué)都或多或少的了解過使用rem進(jìn)行移動端頁面適配的方案以及使用vw的方案,(沒了解過的同學(xué)可以參見大漠老師的這兩篇文章 使用Flexible實現(xiàn)手淘H5頁面的終端適配和再...
本文由云+社區(qū)發(fā)表作者介紹:練小習(xí),2011年加入搜狐,負(fù)責(zé)搜狐相冊的產(chǎn)品策劃與前端開發(fā)。2015年后加入騰訊 ISUX (社交用戶體驗設(shè)計部),目前主要負(fù)責(zé)騰訊云的UI開發(fā)工作,專注于人機(jī)交互,有豐富的UI開發(fā)經(jīng)驗。 這段時間有幸加入了一個關(guān)于微信小程序的項目開發(fā)組,從無到有的根據(jù)文檔自行學(xué)習(xí)了小程序的開發(fā)過程,前面已經(jīng)有幾位前輩的文章珠玉在前,我這里就先從前端界面的開發(fā)方面談一談小程序以及我...
摘要:寫著寫著發(fā)現(xiàn)會寫不少內(nèi)容全部寫在一篇文章里感覺太多了不方便看,所以分為上下篇吧下篇寫完啦,感興趣的朋友可以繼續(xù)關(guān)注開發(fā)仿旅游站項目總結(jié)下溫馨提示此文章,僅是做完項目后的個人覺得可以總結(jié)下來的操作思路,接觸不久的朋友應(yīng)該會有收獲。 寫著寫著發(fā)現(xiàn)會寫不少內(nèi)容... 全部寫在一篇文章里感覺太多了不方便看,所以分為上下篇吧...下篇寫完啦,感興趣的朋友可以繼續(xù)關(guān)注 => Vue開發(fā)仿旅游站we...
摘要:寫著寫著發(fā)現(xiàn)會寫不少內(nèi)容全部寫在一篇文章里感覺太多了不方便看,所以分為上下篇吧下篇寫完啦,感興趣的朋友可以繼續(xù)關(guān)注開發(fā)仿旅游站項目總結(jié)下溫馨提示此文章,僅是做完項目后的個人覺得可以總結(jié)下來的操作思路,接觸不久的朋友應(yīng)該會有收獲。 寫著寫著發(fā)現(xiàn)會寫不少內(nèi)容... 全部寫在一篇文章里感覺太多了不方便看,所以分為上下篇吧...下篇寫完啦,感興趣的朋友可以繼續(xù)關(guān)注 => Vue開發(fā)仿旅游站we...
閱讀 2765·2023-04-25 14:15
閱讀 2708·2021-11-04 16:11
閱讀 3399·2021-10-14 09:42
閱讀 448·2019-08-30 15:52
閱讀 2830·2019-08-30 14:03
閱讀 3550·2019-08-30 13:00
閱讀 2117·2019-08-26 11:40
閱讀 3312·2019-08-26 10:25