这其实可以通过D3内置的缩放行为过滤功能轻松实现，完全不需要手动处理scroll事件，核心就是利用d3.zoom()的.filter()方法来控制触发缩放的条件：

核心实现思路 #

D3的缩放行为允许你通过.filter()方法设置一个判断函数，只有当函数返回true时，缩放逻辑才会被触发；返回false时，事件会交给浏览器的默认行为处理（也就是滚动容器）。我们只需要在这个过滤函数里判断用户是否按下了Ctrl键即可。

代码示例 #

// 创建并配置缩放行为
const zoom = d3.zoom()
  // 过滤事件：仅当Ctrl键按下时才触发缩放
  .filter(event => event.ctrlKey)
  // 设置缩放的范围（可选，根据你的需求调整）
  .scaleExtent([0.5, 4])
  // 缩放事件的处理逻辑
  .on("zoom", (event) => {
    // 将变换应用到你的图表容器（这里假设你的图表组类名为chart-group）
    d3.select(".chart-group").attr("transform", event.transform);
  });

// 将缩放行为绑定到滚动容器上
d3.select(".scroll-container").call(zoom);

兼容多系统的优化（可选） #

如果需要兼容Mac系统的用户，可以把过滤条件改成同时支持Ctrl键和Cmd键（Mac的元键）：

.filter(event => event.ctrlKey || event.metaKey)

这样设置后，默认情况下滚轮会正常触发容器的滚动，只有按住Ctrl（或Mac上的Cmd）并滚动滚轮时，才会触发D3图表的缩放，完全符合你的需求，而且不需要额外手动处理滚动事件。

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