vue+svg+d3.js 如何清除放大缩小

前言

前阵子做svg的项目，要求能实现放大缩小。于是使用了d3.js，但是对于这个技术，现学现用，不是很会。放大缩小的功能是实现了，但是又来了一个新的需求就是给一个按钮，点击后。放大还是缩小的图形能够恢复成原来的样子。实话实说，我又百度看了好多。参考了别人的写法写的，能力渣渣，大牛们勿喷啊！

直接放代码

html：

 <div class="full-screen" style="margin-left: 20px;float: right;padding-top: 5px;">
    <el-tooltip effect="dark" content="图形复位" placement="bottom">
        <i class="el-icon-refresh-left" style="font-size: 24px;" @click="handleRefresh"></i>
    </el-tooltip>
</div>

js：

handleRefresh() {
    let svg = d3.select("#svgcanvas"); //svgcanvas这个是svg这个标签的id
    var zoom = d3.zoom().on("zoom", function () { // svg放大缩小的事件
        d3.select(this).selectAll("g").attr("transform", d3.zoomTransform(svg.node()));
    });
    svg.call(zoom);
    svg.call(zoom.transform, d3.zoomIdentity); //重置
}

CSS：

.full-screen {
    font-size: 16px;
    height: 40px;
    line-height: 40px;
    font-weight: 700;
    cursor: pointer;
    margin: 0px 15px;
    color: azure;
    text-align: right;
}

放图：（那啥gif那种动图的不知道咋放上来的）