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

Question

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

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

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

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

Answer 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';
          }
        })

Answer 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”变量来启用或禁用事件。

Answer 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。