vue使用svg文件补充-svg放大缩小操作(使用d3.js)

 onWinResize(item) { // item是后台返回的数据，我数据处理函数是单独写的，没有放在接口请求后面
      var svg = document.getElementById('svgcanvas'); // svg 的id
      var arrText = []; 
      var arrRect = []; //这两个是我们要赋值和要改变颜色的数组
      for (var i = 0; i < svg.childNodes.length; i++) {
        var child = svg.childNodes[i]; // 循环svg里面的元素
        if (child.tagName == 'g' && child.id != null && child.id.length > 0) { // 找到g元素，然后循环g里面的元素。（如果你的svg里面没有用g元素包裹你的text、line、rect等元素的话，那你直接跳过这一步，走下一步就好了）
          var childG = child.childNodes; 
          for (var k = 0; k < childG.length; k++) { // 循环g里面的元素
            if (childG[k].tagName == 'text' && childG[k].id != null && childG[k].id.length > 0) {
              arrText.push(childG[k].id); //拿到后台返回的text的id
            } else if (childG[k].tagName == 'rect' && childG[k].id != null && childG[k].id.length > 0) {
              arrRect.push(childG[k].id); //拿到后台返回的rect的id
            }
          }
        }
      }
      //循环后台返回的数据，与拿到的svg里面的元素id进行匹配
      for (let j = 0; j < item.length; j++) {
        var eltext = item[j].SvgPtID + '_V';
        var elrect = item[j].SvgPtID + '_C';
        arrText.forEach(i => {
          if (eltext == i) {
            var el = document.getElementById(eltext);
            el.innerHTML = item[j].YCValue; //赋值
            el.attributes.fill.value = '#000';
          }
        })
        arrRect.forEach(v => {
          if (elrect == v) {
            $('#' + elrect).css('fill', '#7ab900') // 改变颜色（记得要安装jQuery插件，引入jQuery）
          }
        })
      }
    },

zoomimg() {
      // 放大缩小
      var svg = d3.select("#svgcanvas");
      svg.call(
        d3.zoom().scaleExtent([0.5, 2]).on("zoom", zoom)
      );
 
      function zoom() {
        d3.select(this).selectAll("g").attr("transform", d3.event.transform);
      }
    }

<div class="full-screen">
 <!-- <el-tooltip effect="dark" :content="fullscreen " placement="bottom"></el-tooltip> -->
 <i class="iconfont iconFullScreen" style="font-size: 24px;" @click="handleFullScreen"></i>
 <span v-if="fullscreen">取消全屏</span>
 <span v-else>全屏</span>
</div>
// data里面fullscreen:false
 handleFullScreen() {
  let element = document.documentElement;
    if (this.fullscreen) {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitCancelFullScreen) {
        document.webkitCancelFullScreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    } else {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.msRequestFullscreen) {
        // IE11
        element.msRequestFullscreen();
      }
    }
    this.fullscreen = !this.fullscreen;
  }