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


Posted in Javascript onSeptember 22, 2020

前言

项目需求是要引入svg文件,然后对里面的元素进行赋值,完了之后还要能够让svg放大缩小,点击查看全屏。针对上一篇文章,进行对svg文件里面的元素进行赋值和放大缩小的补充笔记

svg元素赋值

1. 先看看svg文件的代码

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

思路:我的想法就是循环拿到里面的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.附上效果图

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

放大缩小

这个也是折腾了一波,才做出来的。主要svg文件的操作,貌似做的不多,基本都是svg简单的icon或者img的使用。也是百度看了好多才找到d3这个插件的。

D3.js堪称SVG中的jQuery,让SVG图操作起来更加灵活,更加方便调试。反正就是爱了,爱了。

简单的介绍一下d3.js

D3js 是一个可以基于数据来操作文档的 JavaScript 库。可以帮助你使用 HTML, CSS, SVG 以及 Canvas 来展示数据。D3 遵循现有的 Web 标准,可以不需要其他任何框架独立运行在现代浏览器中,它结合强大的可视化组件来驱动 DOM 操作。

D3 可以将数据绑定到 DOM 上,然后根据数据来计算对应 DOM 的属性值。例如你可以根据一组数据生成一个表格。或者也可以生成一个可以过渡和交互的 SVG 图形。

D3 不是一个框架,因此也没有操作上的限制。没有框架的限制带来的好处就是你可以完全按照自己的意愿来表达数据,而不是受限于条条框框,非常灵活。D3 的运行速度很快,支持大数据集和动态交互以及动画。

此处应附上官网地址:https://www.d3js.org.cn/

想要多了解和学习的可以去看看,很容易理解。

好了,回归正题。vue里面首先要安装d3这个插件

1. npm i d3 --save

2. import * as d3 from "d3"; //在vue文件里面引入d3

1、npm i d3 --save

2、import * as d3 from "d3"; //

3、然后就是界面上的使用了 我们项目的需求是鼠标滚动控制放大缩小,so: html:

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

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

这个只是F11全屏的效果,要是直接是单独整一个界面的话,建议还是用路由跳转吧!

以上这篇vue使用svg文件补充-svg放大缩小操作(使用d3.js)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
14款经典网页图片和文字特效的jQuery插件-前端开发必备
Aug 25 Javascript
浅谈jquery之on()绑定事件和off()解除绑定事件
Oct 26 Javascript
js实现漫天星星效果
Jan 19 Javascript
Javascript中构造函数要注意的一些坑
Jan 23 Javascript
canvas 实现中国象棋
Feb 17 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
使用vue for时为什么要key【推荐】
Jul 11 Javascript
js 执行上下文和作用域的相关总结
Feb 08 Javascript
解决Can't find variable: SockJS vue项目的问题
Sep 22 #Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 #Javascript
Js跳出两级循环方法代码实例
Sep 22 #Javascript
vue 二维码长按保存和复制内容操作
Sep 22 #Javascript
vue-router 按需加载 component: () =&gt; import() 报错的解决
Sep 22 #Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 #Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 #Javascript
You might like
php split汉字
2009/06/05 PHP
js查错流程归纳
2012/05/04 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
jquery超简单实现手风琴效果的方法
2015/06/05 Javascript
详解javascript高级定时器
2015/12/31 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
JavaScript实现三级联动效果
2017/07/15 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
JQuery插件tablesorter表格排序实现过程解析
2020/05/28 jQuery
Python实现把数字转换成中文
2015/06/29 Python
更改Ubuntu默认python版本的两种方法python-&gt; Anaconda
2016/12/18 Python
python实现朴素贝叶斯分类器
2018/03/28 Python
Python多项式回归的实现方法
2019/03/11 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
详解Python学习之安装pandas
2019/04/16 Python
PyQt5 在label显示的图片中绘制矩形的方法
2019/06/17 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python代码实现逻辑回归logistic原理
2019/08/07 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
Pytorch之Variable的用法
2019/12/31 Python
python Tensor和Array对比分析
2020/01/08 Python
快速查找Python安装路径方法
2020/02/06 Python
用opencv给图片换背景色的示例代码
2020/07/08 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
PHP如何自定义函数
2016/09/16 面试题
大学生求职简历的自我评价
2013/10/21 职场文书
安全生产检讨书
2014/01/21 职场文书
《雨点》教学反思
2014/02/12 职场文书
诚信承诺书范文
2014/03/27 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
2014年小学工作总结
2014/11/26 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
2015年安全教育月活动总结
2015/03/26 职场文书
公司催款律师函
2015/05/27 职场文书