50

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

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

我已经尝试了以下没有任何运气。

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

3 回答 3

111

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

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

或者,连同您注册缩放行为的位置:

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

您可能还希望将缩放行为向下移动到G 元素,而不是将其放在根 SVG 元素上;我不确定它能否在根 SVG 上正常工作,因为 SVG 元素不支持transform 属性

于 2012-08-03T03:22:23.013 回答
4

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

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

于 2014-11-03T11:03:04.147 回答
0

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

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

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

.filter 没有使用 dblclick.zoom 方法,而是为我解决了问题。

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

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';
          }
        })
于 2021-09-14T20:42:26.180 回答