javascript - 如何暂时禁用 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()
     }
};

这是一个working jsfiddle example.

编辑:

可以通过以下步骤重现错误行为:

1. 点击圆圈，颜色变为蓝色，缩放无效
2. 在一个方向上多次使用鼠标滚轮，就好像您要放大一样(例如放大)
3. 再次点击圆圈，颜色变为红色，重新启用缩放
4. 使用鼠标滚轮，圆圈变大/变小

Answer 1

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

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

jsfiddle