如何暂时禁用d3.js中的缩放

Question

我正在寻找暂时禁用d3库提供的缩放功能的可能性.我尝试在停用缩放时保存洞穴当前缩放/平移值,并在再次激活缩放时设置缩放/平移值.不幸的是,这不起作用.

这是我创建的代码示例:

var savedTranslation = null;
var savedScale = null;

var body = d3.select("body");

var svg = body.append("svg");

var svgContainer = svg.append("svg:g");

var circle = svgContainer.append("svg:circle")
    .attr('cx', 100)
    .attr('cy', 100)
    .attr('r',30)
    .attr('fill', 'red');

circle.on('click', clickFn);

function clickFn(){
    if (circle.attr('fill') === 'red'){
        circle.attr('fill','blue')
    }
    else if (circle.attr('fill') === 'blue'){
        circle.attr('fill','red')
    }
}; 

svg.call(zoom = d3.behavior.zoom().on('zoom', redrawOnZoom)).on('dblclick.zoom', null);


 function redrawOnZoom(){
     if (circle.attr('fill') === 'red'){
         if (savedScale !== null){
             zoom.scale(savedScale)
             savedScale = null
         }
         if (savedTranslation !== null){
             zoom.translate(savedTranslation)
             savedTranslation = null
         }
         // the actual "zooming"
         svgContainer.attr('transform', 'translate(' + d3.event.translate + ')' + ' scale(' +         d3.event.scale + ')');
     }
     else {
         // save the current scales
         savedScale = zoom.scale()
         savedTranslation = zoom.translate()
     }
};

这是一个有效的jsfiddle示例.

编辑:

可以通过以下步骤重现虚假行为:

1. 单击圆圈,颜色变为蓝色,缩放不起作用
2. 使用鼠标滚轮IN ONE DIRECTION几次,就像你要缩放一样(例如放大)
3. 再次单击圆圈,颜色选项为红色,重新启用缩放
4. 使用鼠标滚轮,圆圈将是巨大的/微小的

Answer 1

我发现最简单的方法是简单地禁用.zoom选择中的所有事件.您必须重新调用zoom才能再次启用该行为.

if (zoomEnabled) {
    svg.call(zoom);
} else {
    svg.on('.zoom', null);
}

的jsfiddle

Answer 2

我实现这一点的方法是使用一个全局标志来告诉您是否启用了缩放。然后您只需检查处理缩放的函数中是否设置了该标志。如果是，则该函数不执行任何操作。