javascript - 如何禁用 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));