d3.js（v4）手动变焦和滚轮变焦不匹配

Question

d3版本是v4 我有按钮来缩放svg元素，我打电话给d3.zoom; 当我拖动svg时，然后单击按钮.svg与oraginal位置相反！ 看起来像zoom.event.transform是自变量。 我该怎么做才能匹配变焦和手动变速器？

有我的代码：

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);

有我的bottonClick代码

 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);
    };

并且变换（x，y）也有同样的问题。

如何匹配它们？ 有代码：https://jsfiddle.net/cloudching/mfb59gb2/10/