vue+svg+d3.js清除放大缩小的效果_vue中d3.js svg缩放时会移除边界-CSDN博客

本文链接：https://blog.csdn.net/weixin_42118466/article/details/106056400

本文介绍了如何在Vue项目中使用SVG和D3.js实现图形放大缩小功能，并通过示例代码展示如何添加按钮，使图形在点击后恢复到原始状态。作者分享了学习D3.js的过程和解决新需求的思路。

摘要由CSDN通过智能技术生成

前言

前阵子做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放大缩小的事件
        // 我的svg的line、text等等的标签都是用g包裹的，所以控制的是g这个标签的大小就好了
        d3.select(this).selectAll(&