d3.js(v4) manual zoom and wheel zoom is not matching

d3 version is v4 i have the button to zoom the svg element,and i aready call the d3.zoom; when i drag the svg,then click the button.the svg is reverse to oraginal position! seem like zoom.event.transform is independent variable. how can i do to matching zoom and manual transfom?

there is my code:

var g = svg.select("g");
var zoom = d3.zoom()
    .scaleExtent([1 / 2, 10]);
zoom.on("zoom", function () {
            g.attr("transform", d3.event.transform);
        })
svg.call(zoom);

there is my bottonClick code

 function zoomExtendClick() {
        var mainGroup = svg.select("g");
        var transform = d3.zoomTransform(mainGroup);
        if (transform == null) {
            transform.k = 1;
            transform.x = 0;
            transform.y = 0;
        }
        transform.k += 0.1;
        transform.x -= width / 2 * 0.1;
        transform.y -= height / 2 * 0.1;

        zoom.scaleTo(mainGroup, transform.k);
    };

and the transform(x,y)has same problem.

how to matching them? there is code :https://jsfiddle.net/cloudching/mfb59gb2/10/