javascript - D3 remove 'zoom' completely - Stack Overflow

admin管理员组

文章数量:1404063

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

Share Improve this question Follow asked Aug 29, 2013 at 5:27 SolessChongSolessChong 3,40788 gold badges4242 silver badges6868 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

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

本文标签： javascriptD3 remove 39zoom39 completelyStack Overflow