Search code examples
javascriptsvgd3.jszooming

D3 remove 'zoom' completely

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.

Solution

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