我有一個已使用匯入的 SVG，d3.xml當我單擊 SVG 中的一個橢圓時，我試圖放大。這幾乎有效，盡管我缺少一些在 SVG 大小更改時定位元素的功能。這是我用來縮放的代碼：
svg.transition().duration(750).call(
zoom.transform,
d3.zoomIdentity
.translate(widthContainer/2 , heightContainer/2)
.scale(2)
.translate(-d3.select(this).attr('cx'), -d3.select(this).attr('cy')),
d3.pointer(event, svg.node())
);
這在瀏覽器視窗的大小代表創建 svg 的大小時有效，因為橢圓的cx和cy值可用于定位它們，但是當我增加瀏覽器視窗的大小時，這當然不會不再作業，因為cx和cy值現在已經過時了。如何將獨立于當前背景關系的元素居中和縮放？我猜有一種方法可以找出父 div 的當前比例，然后從那里計算翻譯引數，但經過幾個小時的嘗試，我沒有找到任何東西。
uj5u.com熱心網友回復：
我找到了解決問題的方法，我最大的錯誤是假設要使我的地圖具有回應性，我需要使用當前視口寬度更新我的變數widthContainer和heightContainer（用于在我的代碼中計算縮放位置等）頁面已加載并調整大小。這引入了一系列非常奇怪的行為，并導致我花費數小時進行本可以避免的除錯。
使具有縮放功能的地圖回應的解決方案是將這兩個變數設定為固定值。如果您使用的 SVG 是通過 d3 作為 xml 讀取的，則使用在 SVG 的 viewbox 屬性中設定的值，例如viewBox="0 0 657.58 344.67".
然后，您可以像往常一樣在 css 中處理您的 SVG 元素所在的容器，并將您的寬度設定為 100% 或您喜歡的任何值，并且地圖應該做出回應。我是 d3 和 JS 的完全菜鳥，所以這種行為對我來說似乎不合邏輯，尤其是因為 d3 的 zoomIdentity 檔案非常糟糕。對于普通的 d3 用戶來說，這似乎是顯而易見的，但我希望這能影響到其他 d3 初學者。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/312431.html
標籤：javascript svg d3.js 缩放 以编程方式
下一篇：使用類名使用svg檔案