vue svgファイルで補完-svg拡大縮小操作（d 3.jsを使用）

前言
プロジェクトの需要はsvgファイルを導入して、中の元素を賦課します。終わったらsvg拡大縮小して、フルスクリーンをクリックしてください。前の文章に対して、svgファイルの中の要素を賦課し、拡大縮小した補充ノートを行います。
svg元素の割り当て
1.まずsvgファイルのコードを見てください。

考え：私の考えは循環して中のidを持ってきて、それからバックグランドのデータと一致して、それから値を賦課します。バックグラウンドから戻ってきたデータIDは後ろにないです。Cと_Vのです。だから私の前の処理が必要です。
2.先端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）
          }
        })
      }
    },

3.効果図を添付する

拡大縮小
これも一難あってのことです。主なsvgファイルの操作は多くないようですが、基本的にはsvgの簡単なiconまたはimgの使用です。百度もたくさん見て、d 3というプラグインを見つけました。
D 3.jsはSVGの中のjQueryと言ってもいいです。SVG図をより柔軟に操作して、デバッグしやすいです。とにかく愛しています。愛しています。
簡単に紹介します。
D 3 jsはデータに基づいて文書を操作できるJavaScriptライブラリです。HTML、CSS、SVG、Canvasを使ってデータを展示するのを手伝ってくれます。D 3は既存のWeb標準に従い、他のいかなるフレームも独立して現代のブラウザで動作することができ、強力な可視化コンポーネントを組み合わせてDOM動作を駆動する。
D 3は、データをDOMに結合し、データから対応するDOMの属性値を計算することができる。例えば、データのセットからテーブルを作成してもいいです。あるいは、遷移と相互作用が可能なSVGパターンを生成してもよい。
D 3はフレームではないので、操作上の制約もない。枠の制限がないメリットは、枠に制限されているのではなく、自分の意思でデータを表現できるということです。非常に柔軟です。D 3の運行速度はとても速くて、ビッグデータセットとダイナミックなインタラクションと動画をサポートします。
ここには公式サイトの住所を添付してください。https://www.d3js.org.cn/。
もっと理解して勉強したいなら行ってみてもいいです。分かりやすいです。
じゃ、本題に戻ります。vueの中にはまずd 3というプラグインをインストールします。
1.npm i d 3--save
2.import*as d 3 from“d 3”；／vueファイルにd 3を導入します。
1、npm i d 3--save
2、import*as d 3 from"d 3"
3、それからインターフェイスで私達のプロジェクトの需要を使ったのはマウスのスクロール制御の拡大縮小です。

js:

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

このように簡単に解決しました。
svgフルスクリーン
これは比較的簡単で、無駄話は多く言わないで、コードをつけます。
html数:

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

これはF 11フルスクリーンの効果です。直接に一つのインターフェースを整えたら、やはりルートでジャンプすることをお勧めします。
以上のこのvueはsvgファイルを使って補足します。svg拡大縮小操作（d 3.jsを使って）は小編を使って皆さんに共有した内容です。参考にしていただければと思います。どうぞよろしくお願いします。