Binding to zoom ending with the zoom behavior

Question

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?

Answer 1

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.

Answer 2

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.