Chrome浏览器下D3缩放功能滚轮触发失效的特殊问题咨询

这是Chrome浏览器特有的针对低优先级透明元素的滚轮事件分发优化机制导致的，与D3版本无关。

• Chrome 92+版本引入了针对完全透明（opacity: 0）、无可见绘制内容、无活跃wheel事件处理标记的元素的优化策略：这类元素会被标记为非交互目标，wheel事件会直接穿透分发到下层元素，不会触发该元素上绑定的wheel监听器。
• 拖拽（mousemove/pointermove）、click事件的分发逻辑不受该优化策略影响，所以平移操作可以正常触发D3的zoom回调。

1. 初始调用clearRect时滚轮正常，点击后失效：初始clearRect会被Chrome判定为元素有活跃绘制操作，暂不触发优化；点击时调用getImageData会触发浏览器对canvas绘制内容的全量校验，此时检测到canvas无有效可见内容、opacity: 0，就会激活优化策略，后续wheel事件不再分发到canvas元素。
2. 删除clearRect调用后初始就失效：没有初始绘制操作，Chrome从页面加载阶段就判定该canvas为非交互透明元素，直接激活优化。
3. 所有D3版本都存在问题：D3的zoom事件绑定逻辑没有变化，问题根源在浏览器的事件分发逻辑。

• 不为canvas设置opacity: 0：破坏优化的前置判断条件，Chrome不会将其标记为非交互目标。
• 全局绑定window的wheel事件监听：会强制浏览器走全局wheel事件分发通路，跳过单元素的优化判断逻辑。
• 将zoom行为绑定到canvas的父元素：父元素不满足完全透明、无内容的优化条件，不会触发该优化策略。

内容的提问来源于stack exchange，提问作者Eric