Initial Zoom Not Working In D3 V4

I have imported zoom like this import {zoom} from 'd3-zoom'; My svg and group container look something like this const svg = select(root) .append('svg') .attr('width'

Solution 1:

Set a variable or a constant using the d3.zoom() method (or, in your case, zoom()):

const myZoom = zoom().on('zoom', () => {
    const transformation = getEvent().transform;
    const {x, y, k} = transformation;
    container.attr('transform', `translate(${x}, ${y})scale(${k})`);
});

Here I'm using myZoom as the name just to make clear that it's different from zoom(), but the most traditional name is zoom (of course, you chan choose whatever valid name you want).

Then, you can use it as:

myZoom.scaleTo(container, zoomScale)

The main difference between using myZoom.scaleTo(container, zoomScale) and zoom().scaleTo(container, zoomScale) is that myZoom holds a reference to the event handlers and other methods in the chain, if any.

Also, don't forget to change the call in the SVG, which becomes just:

svg.call(myZoom);