CODEWITHSUNDEEP
javascriptsvgd3.jszooming
SolessChong
SolessChong

Reputation: 3407

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.

Upvotes: 4

Views: 4709

Answers (3)

Eli
Eli

Reputation: 1836

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

Upvotes: 1

murli2308
murli2308

Reputation: 3002

Try

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

Upvotes: 0

Adam Pearce
Adam Pearce

Reputation: 9293

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.

Upvotes: 5

Related Questions