Javascript d3使用按钮缩放并双击,但不要';使用滚轮进行缩放

Javascript d3使用按钮缩放并双击,但不要';使用滚轮进行缩放,javascript,html,d3.js,svg,Javascript,Html,D3.js,Svg,我正在使用作为我的项目缩放的基础,但我想限制缩放仅限于按钮和双击。理想情况下,使用滚轮应该只是继续向下滚动页面,而不是在鼠标位于svg上时放大svg。感谢您的帮助 您可以通过以下方式实现: var svg = d3.select("body").select("svg") .attr("width", width) .attr("height", height) .append("g") //.call(zoom) //remove the zoom listener

我正在使用作为我的项目缩放的基础,但我想限制缩放仅限于按钮和双击。理想情况下,使用滚轮应该只是继续向下滚动页面,而不是在鼠标位于svg上时放大svg。感谢您的帮助

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

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)

工作代码

对于D34.0,有两种方法可以防止D3 zoom对控制盘事件做出响应

A:

B:

通过鼠标拖动仍然可以平移(平移)

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