我正在開發一個 D3 應用程式，并遇到了一個奇怪的縮放問題，該問題在 Chrome 瀏覽器中出現，但在 Firefox 中沒有出現（這是我測驗代碼的唯一瀏覽器）。我將這個問題歸納為下面的代碼片段。
基本上，在某些情況下，當我在畫布元素上滾動時（使用滑鼠的滾動按鈕或筆記本電腦觸控板上的兩個手指），我所定義的縮放處理程式不會被呼叫。然而，點擊并拖影片布以嘗試平移它確實成功呼叫了縮放處理程式。
問題的細節：
只要 "點擊 "事件處理程式未被呼叫，縮放就能按預期進行。一旦它被呼叫，滾動縮放將無法作業。這與在點擊事件處理程式中呼叫ctx.getImageData有關。
如果我在呼叫 clearRect 的畫布選擇的結尾處省略了 .call，即使你沒有觸發 "點擊 "事件，也會出現縮放的問題
除了 v5 之外，該問題還發生在 D3 的其他版本中。我已經試過了v6和v7.
。我所使用的 Chrome 瀏覽器版本是 92.0.4515.159
我知道有幾種方法可以解決這個問題：
window.addEventListener('wheel', () => {})下面的代碼在左上角創建了一個畫布元素（它是不可見的，因為它的不透明度為 0）。縮放該元素將向控制臺列印一個 "縮放 "資訊。點擊畫布將列印 "點擊"。你會發現，按照現在的代碼，如果你點擊元素，然后試圖滾動縮放，"縮放 "將不會被列印。你也可以在JSFiddle中運行該代碼。https://jsfiddle.net/yr3jdvhw/37/
我想知道是什么造成了這個問題。正如我所提到的，我可以將畫布的不透明度設定為非零值來避免這個問題。但是我真的很想知道根本原因。
。<html>
<head>
<script src="https://d3js. org/d3.v5.min.js"></script>
</head>
<body>
<canvas class="my-canvas"/span>> </canvas>>
<script>
const myCanvas = d3.select(" .my-canvas")
.style('opacity', 0)
.on('click', function () {
console.log("click")
let ctx = this.getContext('2d')
const pixel = ctx. getImageData（0, 0, 1, 1)
})
.call(d3.zoom().on('zoom', () => /span> {
console.log("zooming")
}))
.call(function(s) {
let ctx = s.node().getContext('2D'/span>)
ctx.clearRect(0, 0, s.node() 。 width, s.node().height)
})
</script>>
</body>
</html>/span>uj5u.com熱心網友回復：
這是一個Chrome瀏覽器的錯誤，我剛剛打開了一個關于它的新問題，讓我們希望這將很快得到解決。
根據我的調查，根本問題在于他們確實在合成器級別處理了輪子事件，而且當你的畫布被取消加速時，它不再采取合成器中的良好路徑，因此不再被視為 "輪子事件處理區域"。
呼叫getImageData()目前會對您的畫布進行去加速，它從 GPU 到 CPU 并停留在那里，這就是呼叫此方法導致問題的原因。同樣地，在您執行任何繪圖操作之前，畫布尚未移至 GPU，因此，該錯誤也會在此重現。
請注意，希望在幾個版本中，{ willReadFrequently }將可以在沒有標志的情況下使用，而此時，大多數畫布將始終被加速。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/320659.html
標籤：
上一篇：d3散點圖示簽