I am exploring the d3js (version 4) library and ran into the following issue while playing around with the zoom behavior.

When using the mousewheel in order to zoom after triggering a programmatic zoom by clicking at the svg it causes a laagy/jumpy behavior where it loses it's position.

I found this Stack Overflow resource: [d3.js pan and zoom jumps when using mouse after programatic zoom](https://stackoverflow.com/questions/38597582/d3-js-pan-and-zoom-jumps-when-using-mouse-after-programatic-zoom) and figured that might help me out. But it did not.

I've set up a simple example so that you can see what I mean.
What am I missing here? 

```js
$(document).ready(function() {
    var svg = d3.select('svg');
    var group = d3.select('g#content');

    svg.call(
        d3.zoom().scaleExtent([1, 30]).on('zoom', function() {
            group.attr('transform', d3.event.transform);
        })
    );

    svg.on('click', function() {
        group
          .transition()
          .duration(1000)
          .attr("transform", "translate(100,100) scale(2)");
    });
});
```

```html
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="1200" height="500" viewBox="0 0 1200 500">
    <g id="content">
       <path d="M10,10   l50,0  0,50  -50,0  0,-50 Z" />
       <path d="M70,10   l50,0  0,50  -50,0  0,-50 Z" />
       <path d="M130,10   l50,0  0,50  -50,0  0,-50 Z" />
       <path d="M190,10   l50,0  0,50  -50,0  0,-50 Z" />
       <path d="M250,10   l50,0  0,50  -50,0  0,-50 Z" />
       <path d="M310,10   l50,0  0,50  -50,0  0,-50 Z" />
    </g>
</svg>
```

**Edit**
By adding the following lines to my event listener the behavior improves while zooming in. It still jumps while I zoom out;

```
var transform = d3.zoomTransform(group.node());
transform.x = m.x;
transform.y = m.y;
transform.k = scale;

```

Full updated snippet:

```js
$(document).ready(function() {
    var svg = d3.select('svg');
    var group = d3.select('g#content');

    svg.call(
        d3.zoom().scaleExtent([1, 30]).on('zoom', function() {
            group.attr('transform', d3.event.transform);
        })
    );

    svg.on('click', function() {
        group
          .transition()
          .duration(1000)
          .attr("transform", "translate(100,100) scale(2)");

          var transform = d3.zoomTransform(group.node());
          transform.x = 100;
          transform.y = 100;
          transform.k = 2;

    });
});
```

```html
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg width="1200" height="500" viewBox="0 0 1200 500">
    <g id="content">
       <path d="M10,10   l50,0  0,50  -50,0  0,-50 Z" />
       <path d="M70,10   l50,0  0,50  -50,0  0,-50 Z" />
       <path d="M130,10   l50,0  0,50  -50,0  0,-50 Z" />
       <path d="M190,10   l50,0  0,50  -50,0  0,-50 Z" />
       <path d="M250,10   l50,0  0,50  -50,0  0,-50 Z" />
       <path d="M310,10   l50,0  0,50  -50,0  0,-50 Z" />
    </g>
</svg>
```

Thanks in advance!