preface

The project requirement is to import an SVG file, assign values to the elements in it, and then be able to zoom in and out of SVG by clicking full screen. Supplementary notes on assigning and zooming in on elements in SVG files from the previous article

SVG element assignment

  1. Take a look at the code for the SVG file

 onWinVar SVG = document.getelementById (var SVG = document.getelementById ('svgcanvas'); Var arrText = []; var arrRect = []; // These are the arrays we are assigning and changing colors tofor(var i = 0; i < svg.childNodes.length; i++) { var child = svg.childNodes[i]; // Loop elements in SVGif (child.tagName == 'g'&& child.id ! = null && child.id.length > 0) {// Find the g element and loop through the g element. Var childG = child.childnodes; var childG = child.childnodes; var childG = child.childnodes;for(var k = 0; k < childG.length; K++) {// loop the elements inside gif (childG[k].tagName == 'text'&& childG[k].id ! = null && childG[k].id.length > 0) { arrText.push(childG[k].id); // Get the id of the text returned from the background}else if (childG[k].tagName == 'rect'&& childG[k].id ! = null && childG[k].id.length > 0) { arrRect.push(childG[k].id); // Get the id of the rect returned by the background}}}} // Loop the data returned by the background, and match the element ID in the received SVGfor (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; // Assign el.attributes.fill. Value ='# 000';
                    }
                })
                arrRect.forEach(v => {
                    if (elrect == v) {
                        $(The '#' + elrect).css('fill'.'#7ab900') // Change the color (remember to install jQuery plugin, import jQuery)}})}},Copy the code
  1. Attached is the effect picture:

Zoom in on

It took a lot of work to make this one. The main SVG file operations, it seems that do not do much, basically SVG simple icon or IMG use. Baidu also saw a lot of d3 to find this plug-in.

D3.js is the jQuery of SVG, making SVG diagrams more flexible and easy to debug. It’s just love, love.

A quick introduction to D3.js

D3js is a JavaScript library that can manipulate documents based on data. It helps you display data using HTML, CSS, SVG and Canvas. D3 follows existing Web standards, can run independently in modern browsers without any other framework, and combines powerful visual components to drive DOM operations.

D3 can bind data to the DOM and then calculate the corresponding DOM attribute values based on the data. For example, you can generate a table based on a set of data. Or you can generate an SVG graph that you can transition and interact with.

D3 is not a framework and therefore has no operational limitations. The advantage of having no framework is that you can express your data exactly as you want, rather than being constrained by rules and regulations. D3 is fast and supports large data sets and dynamic interaction as well as animation.

The official website address should be attached: www.d3js.org.cn/

If you want to know more and learn more, you can check it out. It’s easy to understand.

All right, back to business. The first plugin to install in Vue is D3

1. npm i d3 --save
2. import * as d3 from "d3"; // Add d3 to the vue fileCopy the code
  1. npm i d3 –save
  2. import * as d3 from “d3”; //
  3. The next step is to use the interface. The requirement of our project is to scroll the mouse to zoom in and out, so: HTML:

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); }}Copy the code

Simple as that, solved…

SVG full screen

This one is relatively simple, no more nonsense, code

HTML:

<div class="full-screen"> <! -- <el-tooltip effect="dark" :content="fullscreen ? ` ` : ` full-screen `" placement="bottom"></el-tooltip> -->
	<i class="iconfont iconFullScreen" style="font-size: 24px;" @click="handleFullScreen"></i>
	<span v-if="fullscreen"<span > <span v-else> Full screen </span> </div>Copy the code
// 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; }Copy the code

This is only F11 full screen effect, if directly is a separate whole interface, it is recommended to use route jump bar!