D3 remove 'zoom' completely

Question

I'm trying to remove zoom completely from a svg.

zoom = d3.behavior.zoom()
    .x(userNodesScaleX)
    .y(userNodesScaleY)
    .on("zoom", zoomed);
userMapSvg.call(zoom);

And this has added a 'rect.background' to the top of the SVG, which prevent the mouse event from reaching the other elements in the SVG.

So I decide to remove the zoom completely. remove the event, remove that rect. How can I do that?

Current code is

removeZoom = d3.behavior.zoom()
    .on("zoom", null);

which doesn't work. It only toggles the event.

Answer 1

To stop any future zooming from transforming the page, remove the listener:

zoom.on("zoom", null)

To undo previous zoom transformations:

zoom.scale(1).translate([0,0]).event(userMapSvg)

http://bl.ocks.org/1wheel/6414125

The buttons at the top of the bl.ocks show both behaviors.

If neither work/are what you're looking for, posting a working example of the problem would be extremely helpful. You might also want to look through the zoom documentation .

Answer 2

尝试

userMapSvg.on(".zoom", null);

Answer 3

Another way that I found to work is to set the zoom's extent and .extent and translateExtent to the width and height element ( thus disabling the zoom altogether ). And of course to set the scaleExtent to [1,1].