如何在D3.js中禁用缩放功能？

Question

我在D3中具有缩放功能，但是我想将其设为可选，所以我想将其关闭。 这是我的代码：

//Zoom command ...
var zoom = d3.behavior.zoom()
    .x(xScale)
    .y(yScale)
    .scaleExtent([1,10])
    .on("zoom", zoomTargets);

var SVGbody = SVG.append("g")
    .attr("clip-path", "url(#clip)")
    .call(zoom);

/

/The function handleling the zoom. Nothing is zoomed automatically, every elemnt must me defined here.
function zoomTargets() {
    if($("#enableZoom").is(':checked')){    
        var translate = zoom.translate(),
        scale = zoom.scale();

        tx = Math.min(0, Math.max(width * (1 - scale), translate[0]));
        ty = Math.min(0, Math.max(height * (1 - scale), translate[1]));

        //This line applies the tx and ty which prevents the graphs from moving out of the limits. This means it can't be moved until zoomed in first.
        zoom.translate([tx, ty]);

        SVG.select(".x.axis").call(xAxis)
            .selectAll("text")
                .style("text-anchor", "end")
                .style("font-size", AXIS_FONTSIZE)
                .attr("transform", function(d) {
                return "rotate(-30)" 
                });

        SVG.select(".y.axis").call(yAxis)
            .selectAll("text")
                .style("font-size", AXIS_FONTSIZE);

        SVG.selectAll("circle")
        .attr("cx", function(d, i){ return xScale(graphDataX[i]);})
        .attr("cy",function(d){return yScale(d);});

        SVGMedian.selectAll("ellipse")
            .attr("cx", function(d, i){ return xScale((i*100)+100);})
            .attr("cy", function(d){ return yScale(d-0.01);});
    }
}

如您所见，我尝试使用if语句来防止未选中复选框时缩放功能的工作。 这可以防止用户将鼠标置于SVG框架内时在页面上滚动。

我想要正确的方法。 首先十分感谢！

Answer 1

这是一种禁用d3缩放行为的方法

SVGbody.select("g").call(d3.behavior.zoom().on("zoom", null));