I'm trying to remove zoom pletely 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 pletely. 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.

I'm trying to remove zoom pletely 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 pletely. 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.

• javascript
• svg
• d3.js
• zooming

3 Answers 3

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/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.

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].

Try

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