score:2

Accepted answer

When you apply zoom programmatically you should do it this way:

  svg.on('click', function() {
    svg.transition()
      .duration(750)
      .call(zoom.transform, d3.zoomIdentity
        .translate(100, 100) // set x and y transition
        .scale(2) // set scale value
      );
  });

Note, that the translate must be applied before the scale.

Also, pay attention that d3-zoom have a default behaviour (zooming) for double-click event. If you do not want it, you can disable it with this code:

svg.on("dblclick.zoom", null);

Working demo:

$(document).ready(function() {
  var svg = d3.select('svg');
  var group = d3.select('g#content');
  var zoom = d3.zoom().scaleExtent([1, 30]).on('zoom', function() {
    group.attr('transform', d3.event.transform);
  });

  svg.call(zoom);

	svg.on("dblclick.zoom", null);
  
  svg.on('click', function() {
    svg.transition()
      .duration(750)
      .call(zoom.transform, d3.zoomIdentity
        .translate(100, 100)
        .scale(2)
      );
  });
});
<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>

score:1

This is because you are setting zoom values from event.transform (mouse wheel zoom events) while initializing zoom whereas in your click event handler you're setting a static value for transform attribute.

So the next time, a zoom event happens, event.transform value and your svg transform value will be different. So it jumps.

For eg: You zoom using mouse wheel. event.transform will be (500x, 500y, 5k). You do a mouse click and transform attribute will be set to (100x, 100y, 2k). The next time you do a mouse wheel event, event.transform will change from (500x, 500y,5k) say (600x, 600y, 6k). But since your svg transform attribute is (100x, 100y, 2k), it seems like it jumps.


More Query from same tag