d3 使用按钮和双击进行缩放，但不使用滚轮进行缩放答案

【问题标题】：d3 zoom with button and double click but don't zoom with with scroll wheeld3 使用按钮和双击进行缩放，但不使用滚轮进行缩放
【发布时间】：2016-06-07 19:03:08
【问题描述】：

我使用this example 作为放大项目的基础，但我想将缩放限制为仅按钮和双击。理想情况下，使用滚轮应该只是继续向下滚动页面，而不是在鼠标悬停时放大 svg。任何帮助表示赞赏！

【问题讨论】：

标签： javascript html d3.js svg

【解决方案1】：

对于 D3 4.0，有两种方法可以防止 d3 zoom 响应滚轮事件。

答：

zoom.filter(function() { return !event.button && event.type !== 'wheel'; })
// the `!event.button` expression is from the default filter, according to
// doc for zoom.filter([filter])

乙：

svg.on("wheel.zoom", null);
// according to doc for zoom(selection): Internally, the zoom behavior        
// uses selection.on to bind the necessary event listeners for zooming. 
// The listeners use the name .zoom

仍然可以通过鼠标拖动来平移（平移）。

【讨论】：

【解决方案2】：

您可以通过以下方式实现：

var svg = d3.select("body").select("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
   //.call(zoom) //remove the zoom listener from the group.
  .append("g");

接下来在圆形和矩形上附加双击监听器以进行缩放。

d3.selectAll("rect").on('dblclick', zoomClick)
d3.selectAll("circle").on('dblclick', zoomClick)

工作代码here

【讨论】：