如何禁用 d3.behavior.zoom 的双击缩放？

Posted 2023-02-22

【中文标题】如何禁用 d3.behavior.zoom 的双击缩放？

【英文标题】：How to disable double click zoom for d3.behavior.zoom?

【发布时间】：2012-07-31 22:18:45

【问题描述】：

我不希望d3.behavior.zoom 在我的图表上添加双击缩放的功能。如何禁用此行为？

这是一个带有不良行为的JSFiddle。

我尝试了以下方法，但没有任何运气。

 d3.behavior.zoom.dblclick = function() ;

【参考方案1】：

我相信所选答案适用于小于 5 的版本，但以防万一这是我解决问题版本 5.15.x 的方式

使用这个 .on("dblclick.zoom", null);在文档中注明，但当我尝试使用它时它实际上引发了错误（你能相信我的应用程序的神经吗？哈哈）。

https://github.com/d3/d3-zoom/blob/main/README.md#zoomTransform

我没有使用 dblclick.zoom 方法，而是使用 .filter 来解决问题。

我已经在使用双击事件来满足其他用户的需求。因此，在某些特定情况下，我不希望发生双击缩放。

D3.select('svg')
      .call(D3.zoom()
        .scaleExtent([-5, 8])
        .extent([[0, 0], [300, 300]])
        .on('zoom', () => 

          D3.selectAll('g')
            .attr('transform', D3.event.transform);

          this.updateAfterInit(this.root);

        )
        .filter(() => 


          const foundNode = this.N.findNodeByID(D3.event.srcElement.id.split('_')[1])
          if ( !!foundNode && D3.event.type === 'dblclick' && foundNode.data.type === 'SearchRelationspec') 
            return false;
           else 
            return !D3.event.target.classList.contains('drawarea') && D3.event.type === 'dblclick';
          
        )

【参考方案2】：

设置代理功能很容易。存储默认（目标）事件，然后注册一个代理事件。然后，代理将使用您需要的任何逻辑启用/禁用目标事件：

svg.call(zoom);
var dblclickTarget = svg.on("dblclick.zoom");
var mouseScrollTarget = svg.on("mousewheel.zoom");

function eventProxy(fn)
  return function()
    // Enable events if enableEvents=== true
    if(enableEvents)
      fn.apply(this, arguments)
    
  
;

svg.on("wheel.zoom", eventProxy(dblclickTarget))
   .on("mousewheel.zoom", eventProxy(mouseScrollTarget));

通过以这种方式应用代理模式，您可以简单地更改“enableEvents”变量来启用或禁用事件。

【参考方案3】：

您可以通过移除缩放行为的 dblclick 事件侦听器来禁用双击行为。查看您的代码，您已将缩放行为分配给 SVG 元素。所以你可以说：

d3.select("svg").on("dblclick.zoom", null);

或者，连同您注册缩放行为的位置：

.call(d3.behavior.zoom().on("zoom", update)).on("dblclick.zoom", null)

您可能还想将缩放行为向下移动到 G element，而不是将其放在根 SVG 元素上；我不确定它是否能在根 SVG 上正常工作，因为 SVG 元素不支持 transform attribute。

【讨论】：

这似乎不起作用，能否澄清一下

对我也有用，但文档应该在几个小时前就为我回答了这个问题。

实际上我得到了它的工作。您需要在元素上注册缩放之后添加 dblclick 侦听器。感谢这个答案：***.com/a/25024855

第一行是正确答案d3.select("svg").on("dblclick.zoom", null);

这不会禁用触摸设备上的双击。从我从代码中可以看出，禁用它很棘手，因为它只是touchstart 事件之间的间隔，还是我错过了一个优雅的解决方案？ :)