CODEWITHSUNDEEP
d3.jszooming
tmcw
tmcw

Reputation: 11882

Binding to zoom ending with the zoom behavior

It would be convenient if there was a way to easily bind to an event at the end of a zoom behavior transition - when the user mouseup or touchends something that moves the chart. Is this possible by just binding all of the up events, or is this something that people have done some other way?

Upvotes: 7

Views: 4854

Answers (2)

Fran Gimenez
Fran Gimenez

Reputation: 175

I was looking for the same thing, and I found this post.

You can write something like this:

var svg = outer.append("svg:g")
            .call(d3.behavior.zoom()
                    .on("zoom", rescale)
                    .on("zoomstart", zoomStart)
                    .on("zoomend", zoomEnd))
            .on("dblclick.zoom", null)
            .append("svg:g");

function zoomStart(){
    console.log("ZOOM START");
}

function zoomEnd(){
    console.log("ZOOM END");
}

Hope it helps.

Upvotes: 3

Immanuel
Immanuel

Reputation: 343

In d3 v4 the the zoom.on typenames have changed. They are "start", "zoom" and "end" now.

  var d3zoom = d3.zoom()
    .on("start", zoomStartFunction)
    .on("zoom", zoomFunction)
    .on("end", zoomEndFunction);

  svg.call(d3zoom);

Check out the very helpful docs.

Upvotes: 8

Related Questions