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));

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

1 个答案: