CODEWITHSUNDEEP
javascriptjqueryd3.jszoomingscale
kwoxer
kwoxer

Reputation: 3833

D3 zoom is not properly reseting zoom state and translated location

Well I already got it working, but somehow when tested now it does not work anymore. So in my project I have a map that is zoom- and dragable. When zoomed in or dragged you can always click a Reset button to reset the whole presention. That works great.

So the zoom definition:

var g = svg.append("g");
var zoom = d3.behavior.zoom()
    .translate([0, 0])
    .scale(1)
    .scaleExtent([1, maximumZoom])
    .on("zoom", zoomed);
svg.call(zoom);

and the zoom function is:

g.attr("transform", "translate([0,0]).scale(" + 1 + ")");
zoom.translate([0, 0]);
zoom.scale(1);

The reset is done properly when the Reset button is clicked. But when now zooming or dragging anywhere, you actually see that it was the old zoom and location.

But the strange thing is that :

zoom.translate([0, 0]);
zoom.scale(1);

should fix that issue. As I said 1 month ago it worked properly.

In addition also the zoomed function:

function zoomed() {
    g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}

Upvotes: 1

Views: 1061

Answers (1)

kwoxer
kwoxer

Reputation: 3833

I'm not 100% sure but it seems that calling the zoom event or let's say setting the zoom event later on on the svg element is fixing that issue.

So simply call

zoom.on("zoom", zoomed);
svg.call(zoom);

after everything is finished. I put it into a function that is loading the map. And now it's again working properly.

You can see the website here.

Upvotes: 1

Related Questions