D3 V4 Ajust Zoom To Center

Is there an obvious d3 V4 equivalent to the V3 d3.behavior.zoom() .center([width / 2, height / 2]) syntax. (I've searched around, and most working examples of manual zooming, etc r

Solution 1:

You can do it 2 things

• First, apply zoom directly to the center:

var zoom = d3.zoom()
  // Don’t allow the zoomed area to be bigger than the viewport.
  .scaleExtent([1, Infinity])
  .translateExtent([[0, 0], [w, h]])
  .extent([[0, 0], [w, h]])
  .on("zoom", zoomed);

grupopadre.style("transform-origin", "50% 50% 0");
svg.call(zoom);
functionzoomed() {
  grupopadre
    .style('transform', 'scale(' + d3.event.transform.k + ')');
}

• Second, center the graphic when you zoom out:

var zoom = d3.zoom()
  // Don’t allow the zoomed area to be bigger than the viewport.
  .scaleExtent([1, Infinity])
  .translateExtent([[0, 0], [w, h]])
  .extent([[0, 0], [w, h]])
  .on("zoom", zoomed);

grupopadre.style("transform-origin", "50% 50% 0");

svg.call(zoom);
functionzoomed() {
  grupopadre.attr("transform",d3.event.transform);
}  

You need to create a group with all SVG content in this.

Solution 2:

Not sure if that answers your question, but here you can see similar example in V4: https://bl.ocks.org/mbostock/db6b4335bf1662b413e7968910104f0f

You can find detailed documentation on the zoom behavior in D3 API Docs for version 4 and I don't think there exist a more "obvious" way that is not documented: https://github.com/d3/d3/blob/master/API.md#zooming-d3-zoom

Solution 3:

I think it is just d3.zoom() now

var zoom = d3.zoom()
            // Don’t allow the zoomed area to be bigger than the viewport.
            .scaleExtent([1, Infinity])
            .translateExtent([[0, 0], [width, height]])
            .extent([[0, 0], [width, height]])
            .on("zoom", zoomed);

Solution 4:

You could add transform-origin to a style attribute to the element on which you perform the zoom:

.style("transform-origin", "50% 50% 0")

EDIT

Working Plnkr here

Solution 5:

Here is the solution I found:

function zoomed() {
    var scale = d3.event.transform.k; 
    grupopadre.attr("transform", "translate(" + 0 + ")scale(" + scale + ")");
}